VisuallyHidden
Overview
VisuallyHidden hides content visually while keeping it in the accessibility tree. Use it to provide screen reader context for icon-only controls or decorative UI.
Live demoInteractive
Anatomy
- Root: The visually hidden element.
- Content: Text read by assistive technologies.
Usage
import { Icon, VisuallyHidden } from '@grasdouble/lufa_design-system';
<button>
<Icon name="search" />
<VisuallyHidden>Search</VisuallyHidden>
</button>;
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'span' | The HTML element to render. |
children | ReactNode | - | The content to hide. |
Accessibility
Use VisuallyHidden instead of display: none when the content is meaningful to screen readers.
Theming & Tokens
VisuallyHidden does not use design tokens. Styling is hidden at the CSS level.
Do / Don’t
Do
Use VisuallyHidden for icon-only buttons to provide an accessible label.
Don’t
Don’t hide essential visible instructions—use normal text when users need to see it.