VisuallyHidden

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

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

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

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

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

API

<VisuallyHidden />
<VisuallyHidden />

VisuallyHidden

API

Stay tuned