Component

Use these helpers to visually hide elements but keep them accessible to assistive technologies.

View component changelog
preview

Icon-only actions

Each control has a hidden text label for screen readers.

React
import Button from "@radui/ui/Button"
import VisuallyHidden from "@radui/ui/VisuallyHidden"

const VisuallyHiddenExample = () => (
    <Button>
        <VisuallyHidden>Search documentation</VisuallyHidden>
        <span aria-hidden="true">⌕</span>
    </Button>
)
PropTypeDefaultDescription
asChild
boolean
false

renders the children in desired element

Edit this page on GitHub →