Buttonchild
Use inside icon-only buttons for accessible labelsVisuallyHidden
Hides content visually while keeping it accessible to screen readers. Essential for accessible icon-only buttons and supplementary text.
Setup
import { VisuallyHidden } from '@fragments-sdk/ui';Examples
Icon Button Label
Accessible label for icon-only button
Loading preview...
Supplementary Text
Additional context for screen readers
Loading preview...
Skip Link
Navigation aid that becomes visible on focus
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Content to hide visually |
as | enumspandiv | span | HTML element to render |
Usage Guidelines
When to use
- Providing accessible labels for icon-only buttons
- Adding context that screen readers need but sighted users don't
- Hiding decorative content while providing text alternatives
- Skip links for keyboard navigation
When not to use
- Hiding content from everyone (use display: none or conditional render)
- Content that should be visible on focus (use focus-visible styles)
- Temporarily hidden content (use proper ARIA attributes)
- Lazy-loaded content (use suspense or loading states)
Best practices
- Always use with icon-only interactive elements
- Keep hidden text concise but descriptive
- Test with screen readers to verify announcements
- Don't overuse; visible text is often better
- VisuallyHidden forwards DOM props and className to the rendered element
Accessibility
- Content is announced by screen readers
- Content is focusable if interactive elements are inside
- Essential for WCAG 2.1 compliance with icon-only controls
- Must convey equivalent information to visual content