⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

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 into your FastStore project

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.


Usage

visually hidden text
<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.)