Variable: VisuallyHidden

@arolariu/components

---

@arolariu/components / VisuallyHidden

Variable: VisuallyHidden

const VisuallyHidden: ForwardRefExoticComponent<VisuallyHiddenProps & RefAttributes<HTMLSpanElement>>

Defined in: components/ui/visually-hidden.tsx:40

Hides content visually while keeping it accessible to screen readers.

Remarks

Rendering Context: Server- and client-compatible presentational component.

Renders a <span> that uses the classic clipping technique to remove content from the visual flow without removing it from the accessibility tree. Use it to provide labels for icon-only controls, clarify status changes, or add extra context for assistive tech.

Example

<button type="button">
  <TrashIcon aria-hidden="true" />
  <VisuallyHidden>Delete item</VisuallyHidden>
</button>

See

W3C hiding elements guidance