Ariakit
/

Toolbar

Group a set of related controls, reducing the number of tab stops in the keyboard interface. This component is based on the WAI-ARIA Toolbar Pattern.

Open preview in a new tab
Edit withViteNext.js
import "./style.css";
import * as Ariakit from "@ariakit/react";
import { bold, italic, redo, underline, undo } from "./icons.jsx";
export default function Example() {
return (
<Ariakit.Toolbar className="toolbar">
<Ariakit.ToolbarItem className="button secondary">
{undo}
Undo
<Ariakit.ToolbarItem className="button secondary" disabled>
{redo}
Redo
<Ariakit.ToolbarSeparator className="separator" />
<Ariakit.ToolbarItem className="button secondary">
{bold}
Bold
<Ariakit.ToolbarItem className="button secondary">
{italic}
Italic
<Ariakit.ToolbarItem className="button secondary">
{underline}
Underline
);
}

Examples

API

Follow updates

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

Read latest issue

No Spam. Unsubscribe at any time.