Visually Hidden

Hides content from the screen in an accessible way.

<button class="DemoButton violet" type="button">
  Save
  <VisuallyHidden.visually_hidden>the document</VisuallyHidden.visually_hidden>
</button>

• Visually hides content while preserving it for assistive technology.

Anatomy

Import the component.

<VisuallyHidden.visually_hidden>
  …
</VisuallyHidden.visually_hidden>

Visually Hidden: Hides content visually while keeping it available to screen readers.

Use the visually hidden primitive.

<button type="button">
  Save
  <VisuallyHidden.visually_hidden> the document</VisuallyHidden.visually_hidden>
</button>

Anything you put inside this component will be hidden from the screen but will be announced by screen readers.

Prop	Type	Default	Description

This is useful in certain scenarios as an alternative to traditional labelling with aria-label or aria-labelledby.