SROnly

Hides an element visually and improves accessibility by providing text to screen readers.

The SROnly component hides content visually while keeping it available to screen readers. Use it to provide additional context or accessible labels without impacting the visual design.

Example

Code

visually hidden text

Usage

Import the component


_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';

For details, see Importing FastStore UI component styles.

Data attributes

You can target and override SROnly styles using the following data attributes:

data-fs-sr-only

Be cautious when modifying this style, as changes may break its functionality.

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`