SROnly

Hides an element visually. Improve accessibility by providing text to screen readers when applied.

Import

Import the component from @faststore/ui

import { SROnly } from '@faststore/ui'

Import Styles

import '@faststore/ui/src/components/atoms/SROnly/styles.scss'

visually hidden text

<SROnly text="visually hidden text" />

Name	Type	Description	Default
Coming Soon

For further customization, you can use the following data attributes:

data-fs-sr-only

(Be careful when applying changes to this style. It can stop working as expected.)