Visually Hidden

Hides content visually while keeping it accessible to screen readers. Required for icon-only buttons, dialogs without visible titles, and any UI where visual design omits text that assistive technology needs.

Built on Radix UI.

✓Content is announced by screen readers
✓Invisible to sighted users
✓Required for accessible icon-only buttons and dialogs without visible titles
✓Built on Radix UI VisuallyHidden

Icon button with hidden accessible label

import { Visually Hidden }from "@aetherstack/ui"

visually hidden.tsx

import { VisuallyHidden } from "@/components/ui/visually-hidden"
import { Button } from "@/components/ui/button"
import { Settings } from "lucide-react"

export function VisuallyHiddenDemo() {
  return (
    <Button variant="outline" size="icon">
      <Settings className="h-4 w-4" />
      <VisuallyHidden>Open settings</VisuallyHidden>
    </Button>
  )
}

Usage

Icon-only button

Provide an accessible name for a button that shows only an icon.

Dialog with hidden title

Use inside DialogTitle when you want a title for screen readers but no visible heading.

Skip navigation link

A common accessibility pattern — visible only on focus.

Props

Prop	Type	Default	Description
children	ReactNode	—	Content to hide visually but expose to screen readers.
className	string	—	Additional Tailwind classes (use sparingly — VisuallyHidden applies its own positioning).

* Required props

Accessibility

→Use inside DialogContent when you want a title but no visible heading — Radix Dialog requires a DialogTitle.
→Use inside icon-only buttons to provide accessible names for screen readers.
→Do not use display:none or visibility:hidden as alternatives — these hide content from assistive technology too.
→Prefer native aria-label on interactive elements when possible; use VisuallyHidden for non-interactive text nodes.