SR Only

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
text*	`string`	Defines component element type (e.g.: span).
as	`ElementType`	Defines component element type (e.g.: span, div, h1).	`span`

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.)