React Visually Hidden component

Visually Hidden keeps authored text available to assistive technology while removing its visual layout footprint.

Choose with confidence

Know when Visually Hidden is the right part

Use it when

Use it for an accessible name or short supplemental context when an adjacent visual already communicates the same meaning, such as an icon-only action.

Choose another path when

Do not hide text that benefits everyone, keyboard-focusable content, essential instructions, visible errors, or content requiring a live announcement. aria-hidden is for decorative content and does the opposite.

Installation and imports

tsx

import { VisuallyHidden } from "@flowstack-ui/brick/visually-hidden";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/visually-hidden.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Quick start

tsx

<button type="button">
  <SearchIcon aria-hidden="true" />
  <VisuallyHidden.Root>Search</VisuallyHidden.Root>
</button>

Visual recipes and states

There are no variants, tones, sizes, or interaction states. Root always applies Atom's behavior-preserving visually-hidden style.

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Public exports are VisuallyHidden, VisuallyHiddenRoot, and VisuallyHiddenRootProps. Root accepts Atom's children, native span attributes, style, ref, render, and asChild. It has no visual recipe props.

Shared responsibility

Accessibility

Content remains in the accessibility tree and can contribute to an ancestor's accessible name. Do not place keyboard-accessible descendants inside Root. Keep the hidden phrase short, specific, and equivalent to the visual meaning.

Responsive behavior

Behavior is identical at every viewport, zoom level, direction, and appearance. The hidden content contributes no visible layout size.

Stable visual contract

Styling and tokens

Customization

Native attributes, consumer classes, and non-conflicting styles pass through. Do not override the hiding properties. Use visible Text instead when visual presentation is required.

Tokens and CSS hooks

The stable class is .brick-visually-hidden; the stable default hook is data-slot="visually-hidden". There are no CSS variables because Atom's inline accessibility behavior is authoritative.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground

Visually Hidden

Built from the published package