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