VisuallyHidden
TypographyScreen-reader-only wrapper — hidden visually, readable by AT.
Uses the standard CSS clip-rect technique to hide content from sighted users while preserving it in the accessibility tree. Use for icon button labels, skip links, and supplementary context.
Usage
import { VisuallyHidden } from "nosible-ux"
import { ActionIcon } from "nosible-ux"
import { Bell } from "lucide-react"
export default function Example() {
return (
<ActionIcon>
<Bell size={16} aria-hidden />
<VisuallyHidden>Open alerts</VisuallyHidden>
</ActionIcon>
)
}Examples
Skip navigation link
Props
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content that is hidden visually but readable by screen readers. |