Toolbar

A row of ghost buttons with arrow-key navigation.

import { Toolbar } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function ToolbarBasic() {
  return (
    <Preview>
      <Toolbar.Root aria-label="Actions">
        <Toolbar.Button>Action 1</Toolbar.Button>
        <Toolbar.Button>Action 2</Toolbar.Button>
        <Toolbar.Separator />
        <Toolbar.Button>Action 3</Toolbar.Button>
      </Toolbar.Root>
    </Preview>
  );
}

Use a toolbar for a few actions on one object, such as a log line or a panel. Actions for a selection of rows go in the Action bar.
The toolbar is one tab stop; arrow keys move between its buttons and skip disabled ones.
Give Toolbar.Root an aria-label that names what the actions apply to.
The root shifts left by the button padding, so the first label lines up with the text above it. Buttons wrap onto the next line when the row runs out of room.
Toolbar.Separator splits groups of actions with a short vertical line.

API

PropType

variant?"default" | "field" | "primary" | "ghost" | "danger"

On Button.

Type"default" | "field" | "primary" | "ghost" | "danger"

Default"ghost"

size?"inline" | "xs" | "sm" | "md"

On Button.

Type"inline" | "xs" | "sm" | "md"

Default"sm"

shape?"rect" | "pill" | "square"

On Button.

Type"rect" | "pill" | "square"

Default"rect"

loading?boolean

On Button. Shows a spinner and blocks clicks.

Typeboolean

onClick?(event) => unknown

On Button. A returned promise shows the spinner until it settles.

Type(event) => unknown

render?ReactElement | function

On Button. Renders another element, such as a router link.

TypeReactElement | function

Toolbar.Button takes the props of Button; a disabled button leaves the tab order. Parts: Root, Button, Separator; Base UI’s Group, Link and Input pass through unstyled. Built on Base UI Toolbar.