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⁠.

Toolbar
Edit example
Open preview in a new tab
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>

      <Ariakit.ToolbarItem className="button secondary" disabled>

        {redo}

        Redo

      </Ariakit.ToolbarItem>

      <Ariakit.ToolbarSeparator className="separator" />

      <Ariakit.ToolbarItem className="button secondary">

        {bold}

        Bold

      </Ariakit.ToolbarItem>

      <Ariakit.ToolbarItem className="button secondary">

        {italic}

        Italic

      </Ariakit.ToolbarItem>

      <Ariakit.ToolbarItem className="button secondary">

        {underline}

        Underline

      </Ariakit.ToolbarItem>

    </Ariakit.Toolbar>

  );

}

Examples

Toolbar with SelectRendering Select as a ToolbarItem inside a Toolbar.
View all Toolbar examples

API

useToolbarStore()

useToolbarContext()



<ToolbarProvider>

  <Toolbar>

    <ToolbarContainer />

    <ToolbarInput />

    <ToolbarItem />

    <ToolbarSeparator />

  </Toolbar>

</ToolbarProvider>

Stay tuned

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

No spam. Unsubscribe anytime. Read latest issue⁠