Hide an element visually but keep it available for screen readers and other assistive technologies.
1234567891011121314import { Button } from "ariakit/button"; import { VisuallyHidden } from "ariakit/visually-hidden"; import { undo } from "./icons"; import "./style.css"; export default function Example() { return ( <Button className="button"> {undo} <VisuallyHidden>Undo</VisuallyHidden> </Button> ); }
import { Button } from "ariakit/button"; import { VisuallyHidden } from "ariakit/visually-hidden"; import { undo } from "./icons"; import "./style.css"; export default function Example() { return ( <Button className="button"> {undo} <VisuallyHidden>Undo</VisuallyHidden> </Button> ); }
npm install ariakit
Learn more in Getting started.
<VisuallyHidden />