VisuallyHidden

Hides content visually while keeping it in the accessibility tree — for screen-reader-only labels and captions that must not take up layout space. Wraps Radix's VisuallyHidden. RSC-safe.

Search the material library

Usage

import { VisuallyHidden, VisuallyHiddenProps } from "@desk/ui/components/visually-hidden";

Best practices

Use for screen-reader-only text (e.g. a link's full context) — for icon-only Buttons prefer the aria-label prop the component already requires.
Never hide interactive or focusable content inside it — sighted keyboard users would tab into something they cannot see.

Props

Also exports

componentVisuallyHidden
typeVisuallyHiddenProps