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

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