VisuallyHidden

Text for screen readers only: the words a sighted reader gets from layout or an icon.

PrimitivesServer-rendered

Examples

The icon and colour show the state; the hidden text says it to screen reader users.

Light

github-mcp (connected)

Dark

github-mcp (connected)

Example

Wrap

<Text as="span" tone="success">
  <Icon name="circle-check" size={14} /> github-mcp
  <VisuallyHidden> (connected)</VisuallyHidden>
</Text>

Light

Dark

Example

Wrap

<Link href={editHref}>
  Edit<VisuallyHidden> {server.name}</VisuallyHidden>
</Link>

Wrap

import { VisuallyHidden } from '@switchboard/ui'

<VisuallyHidden> (connected)</VisuallyHidden>

Every component also takes mix, for css() and mixins applied after its own style.

VisuallyHidden props
Prop	Type	Default	Description
children	RemixNode	–	Text to announce.
mix	Mix	–	Extra css() or mixins.

Also accepts every <span> attribute.

Clipped to 1px rather than display: none, so the text stays in the accessibility tree and is read in place.
Start the text with a space when it follows a word, or the two run together when read.
Never put focusable elements inside; a focused element would be invisible.

Give repeated "Edit" or "Remove" links a unique name.
Prefer aria-label on icon-only controls; use this when the words belong in the flow of text.