Visually Hidden

Hides its children visually, while keeping content visible to screen readers. This would typically be used to visually hide labels but keeping them accessible to screen readers, and when you want to take advantage of the behavior and semantics of a native element (like a checkbox or radio button), but replace it with a custom styled element.

Features

• Visually hides content while preserving it for assistive technology.

Parts and their API

Usage

<Button>
	<Icon name="bars-3" />
	<VisuallyHidden>Open sidebar</VisuallyHidden>
</Button>

Source

import { VisuallyHidden } from 'react-aria'

export { VisuallyHidden }