VisuallyHidden
Preview appears after the next Storybook update.
<VisuallyHidden />When to use
Use it for
- A control whose visible content is not enough on its own, like a checkbox in a table row: "Select Button".
- Extra context a sighted user gets from the layout, like " (opens in a new tab)" after an external link.
- A label for a loading region while Skeleton placeholders are shown, like "Loading tokens".
Not for
- Hiding content from everyone: use the hidden attribute or do not render it.
- Naming an icon-only button: IconButton takes a label prop for that.
- Long text or anything interactive: it is a span clipped to one pixel, so a link or button inside it would take focus while staying invisible.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
Add the words the layout implies
Link with external does it for you: it adds a VisuallyHidden " (opens in a new tab)" after the label.
Keep it short and specific
Name the thing the control acts on: "Select Button" in a row, "Select all tokens" in the header.
Repeat what is already visible
If the visible label says it, screen readers read it twice.
Use it to hide content you want to remove
Screen reader users still hear it. Remove the content, or use the hidden attribute.
Accessibility
- Renders a span that stays in the accessibility tree: screen readers read its text in place.
- Clipped to one pixel with clip-path and overflow hidden, positioned absolutely, so it takes no room in the layout.
- white-space: nowrap keeps the words from being read one per line by some screen readers.
- Accepts every native span attribute and spreads them, so an id for aria-describedby works.
Content guidelines
- Write it as part of the sentence it completes, with the leading space when it follows other text: " (opens in a new tab)".
- Sentence case, no trailing period unless it is a full sentence.
From the code Generated from the component, not editable here.
Anatomy and tokens
Read from packages/react/src/components/VisuallyHidden/VisuallyHidden.module.css at build time. Every value is a token: open one to see its alias chain in both themes.
- The clipped span, one pixel wide (border.width.1)
.hidden
Motion and interaction
VisuallyHidden does not animate: it only lays out other components.
From the code Generated from the component, not editable here.
Props
Parsed from the TypeScript types in packages/react/src/components/VisuallyHidden/VisuallyHidden.tsx, so this table cannot drift from the code. It also accepts every native <span> attribute.
No props of its own. Text for assistive technology only: read by screen readers, invisible on screen.
Playground
VisuallyHidden has no typed options to play with: it is a container. Compose it with other components and any native attribute. Here it is in both themes.
Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open VisuallyHidden in Storybook).
Embed Storybook stories here (2)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.
Default
AllStates
From the code Generated from the component, not editable here.
Changelog
- Fix
Usage guidance for VisuallyHidden
v1.0.0, Nov 11, 2026
- Fix
Usage guidance for Icon and VisuallyHidden, drafted by Claude from their code and marked for review
v1.0.0, Nov 11, 2026