Ariakit
/
/
This site is under construction Subscribe to updates

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 {
  Toolbar,
  ToolbarItem,
  ToolbarSeparator,
  useToolbarState,
} from "ariakit/toolbar";
import { bold, italic, redo, underline, undo } from "./icons";
import "./style.css";

export default function Example() {
  const toolbar = useToolbarState();
  return (
    <Toolbar state={toolbar} className="toolbar">
      <ToolbarItem className="button">
        {undo}
        Undo
      </ToolbarItem>
      <ToolbarItem className="button" disabled>
        {redo}
        Redo
      </ToolbarItem>
      <ToolbarSeparator className="separator" />
      <ToolbarItem className="button">
        {bold}
        Bold
      </ToolbarItem>
      <ToolbarItem className="button">
        {italic}
        Italic
      </ToolbarItem>
      <ToolbarItem className="button">
        {underline}
        Underline
      </ToolbarItem>
    </Toolbar>
  );
}

Installation

npm install ariakit

Learn more in Getting started.

API

useToolbarState()

<Toolbar>
  <ToolbarContainer />
  <ToolbarInput />
  <ToolbarItem />
  <ToolbarSeparator />
</Toolbar>