Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreUI componentsAtoms
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 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

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