Documentation
Feedback
Guides
Storefront Development

Storefront Development
SROnly

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

Import

Import the component from @faststore/ui

_10
import { SROnly } from '@faststore/ui'

Import Styles

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


Usage

visually hidden text

_10
<SROnly text="visually hidden text" />


Props

NameTypeDescriptionDefault
text*stringDefines component element type (e.g.: span).
asElementTypeDefines 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.)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page