SROnly
Hides an element visually. Improve accessibility by providing text to screen readers when applied.
Import
Import the component from @faststore/ui
_10import { SROnly } from '@faststore/ui'
Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
_10@import '@faststore/ui/src/components/atoms/SROnly/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
visually hidden text
_10<SROnly text="visually hidden text" />
Props
| Name | Type | Description | Default |
|---|---|---|---|
| text* | string | Defines component element type (e.g.: span). | |
| as | ElementType | Defines component element type (e.g.: span, div, h1). | span |
Customization
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.)