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'

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.

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