Toolbar

About this component

A floating pill toolbar built from compound parts: buttons, toggles, one-of-many and any-of-many toggle groups, and separators. One highlight slides under whichever item the pointer or keyboard is on, and one tooltip rides along with it showing the label and the shortcut as key caps, drawn for the platform (⌘ on a Mac, Ctrl elsewhere). Arrow keys, Home and End move through the bar as a single tab stop, in a row or a column.

Usage

The import and the props worth knowing about, in one place.

import {
  Toolbar,
  ToolbarButton,
  ToolbarSeparator,
  ToolbarToggle,
  ToolbarToggleGroup,
} from "@/components/beste/component/toolbar";

// A tool picker, a formatting set and a plain action
<Toolbar aria-label="Canvas tools" floating>
  <ToolbarToggleGroup type="single" value={tool} onValueChange={setTool} aria-label="Tool">
    <ToolbarToggle value="select" icon={MousePointer2} label="Move" shortcut="V" />
    <ToolbarToggle value="pen" icon={PenTool} label="Pen" shortcut="P" />
  </ToolbarToggleGroup>
  <ToolbarSeparator />
  <ToolbarToggleGroup type="multiple" defaultValue={["bold"]} aria-label="Text style">
    <ToolbarToggle value="bold" icon={Bold} label="Bold" shortcut="Mod+B" />
    <ToolbarToggle value="italic" icon={Italic} label="Italic" shortcut="Mod+I" />
  </ToolbarToggleGroup>
  <ToolbarSeparator />
  <ToolbarButton icon={Undo2} label="Undo" shortcut="Mod+Z" onClick={() => console.log("undo")} />
</Toolbar>

// A column down the side of a canvas, tooltips to the right
<Toolbar orientation="vertical" tone="outline" size="lg" aria-label="Layers">
  <ToolbarButton icon={Plus} label="Add layer" shortcut="Mod+Shift+N" />
  <ToolbarToggle icon={Eye} label="Show hidden" defaultPressed />
</Toolbar>

// A word on the button instead of a tooltip
<ToolbarButton icon={Share} label="Share" showLabel />

Keyboard and gestures

Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.

Tab	Enter or leave the bar. The whole toolbar is one stop, landing on the item used last.
Arrow keys	Move along the bar: left and right in a row, up and down in a column. Wraps at the ends.
Home / End	Jump to the first or the last item.
Enter / Space	Press the button, or turn the toggle on or off.
Escape	Close the tooltip.

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Buttons, toggles, groups and separators.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Row or column. Arrow keys follow it: left and right for a row, up and down for a column.
`side`	`"top" \| "bottom" \| "left" \| "right"`	—	Where the tooltip opens. Defaults to above a row and to the right of a column.
`tone`	`"muted" \| "outline" \| "ghost"`	`"muted"`	Surface treatment: filled (default), hairline outline, or bare until hover.
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Item size preset.
`floating`	`boolean`	—	Lift the bar off the page with a soft shadow, for a toolbar that floats over a canvas.
`aria-label`	`string`	—	Accessible name for the toolbar.
`className`	`string`	—