VisuallyHidden

Hide an element visually but keep it available for screen readers and other assistive technologies.

12345678910111213
import "./style.css";
import { Button, VisuallyHidden } from "@ariakit/react";
import { undo } from "./icons.jsx";

export default function Example() {
  return (
    <Button className="button">
      {undo}
      <VisuallyHidden>Undo</VisuallyHidden>
    </Button>
  );
}

import "./style.css";
import { Button, VisuallyHidden } from "@ariakit/react";
import { undo } from "./icons.jsx";

export default function Example() {
  return (
    <Button className="button">
      {undo}
      <VisuallyHidden>Undo</VisuallyHidden>
    </Button>
  );
}

API

<VisuallyHidden />
<VisuallyHidden />

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Components.

Read latest issue