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.

import * as Ariakit from "@ariakit/react";
import { bold, italic, redo, underline, undo } from "./icons.tsx";
import "./style.css";
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
);
}

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue