Visually Hidden

Hides its slot content visually while keeping it accessible to screen readers (the standard "sr-only" pattern).

ExamplesCodeUsageChangelog

Basic usage

The text below is present in the DOM and announced by screen readers, but not visible on screen.

Tailwind v4

<button>
  ✕
  <VisuallyHidden>Close dialog</VisuallyHidden>
</button>

Labeling an icon-only control

Useful for giving icon buttons an accessible name without showing visible text.

🔍Search the site

Tailwind v4

<a href="/search">
  🔍
  <VisuallyHidden>Search the site</VisuallyHidden>
</a>

Props

VisuallyHidden takes no props — it renders a fixed <span> wrapper with the standard sr-only CSS.