Visually
VisuallyHidden hides content from the screen while keeping it available to screen readers.
Applies the sr-only class. Use asChild to merge it into an existing element and focusable to show it again when it receives focus (skip link). The visuallyHiddenClass constant can be used directly in className.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { VisuallyHidden } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Press Tab to reveal the hidden button.
Skip link (focusable)
Press Tab into the example frame: the hidden button appears when it receives focus.
Version 2.0 is out. Read more about version 2.0
Extra context for a link
Sighted users see “Read more”; screen readers hear “Read more about version 2.0”.
Usage
Do
- Use it for icon-only button labels, table captions and link context.
- Set focusable on skip links.
Don't
- Don't hide interactive content (except focusable skip links).
- Don't add it to an element that already has a visible label: screen readers would read it twice.
Props
| Prop · Type | Default | Description |
|---|---|---|
| asChildboolean | Default: false | Merges the sr-only class into the child element instead of rendering a <span>. |
| focusableboolean | Default: false | Shows the content again when the element (or a child) receives focus. |
| visuallyHiddenClass"sr-only" | Default: — | Class constant for direct use. |