Components
VisuallyHidden
Hides content visually while keeping it in the accessibility tree.
An icon-only button, a decorative row that still needs a text label for a screen-reader user, a
live status a sighted user reads from layout alone — VisuallyHidden clips its children to a 1px
box instead of display: none, so the content stays in the tab order and the accessibility tree
while occupying no visible space.
Pure CSS mechanics, not a design value — there is nothing to measure against Attio here.
SkipLink starts from the same clip pattern before it un-hides on focus.
Available since@crisp-ui-kit/crisp@0.54.0
Installation
npm install @crisp-ui-kit/crispUsage
import { VisuallyHidden } from "@crisp-ui-kit/crisp";
<button>
<SearchIcon />
<VisuallyHidden>Search</VisuallyHidden>
</button>;