VisuallyHidden

A utility component that hides content visually while keeping it accessible to screen readers.

Usage

Renders content that is visually hidden but remains available to assistive technologies like screen readers. This is useful for providing accessible labels to icons, enhancing context for screen reader users, or hiding decorative content.

import { VisuallyHidden } from "@elemnts-ui/react"

<button type="button">
  <Icon>
    <BellIcon />
  </Icon>
  <VisuallyHidden>Notifications</VisuallyHidden>
</button>

Examples

With Icon

Visually hidden text is commonly used to label icon-only buttons and controls, ensuring screen reader users can understand their purpose.