Toolbar

A floating pill that groups related controls, such as formatting buttons, into one stop for Tab with the arrow keys moving between them.

ui.toolbarcomponents/ui/toolbar.tsx

Use case

For the AI

Use it for a set of tools that act on one thing: the formatting controls of a notes editor (Bold, Italic, Link, Heading), the controls over a document preview, the actions on rows a person has ticked in a table. Each `ToolbarButton` renders a `Toggle` for something that switches on and off, or a `Button` for a one-time action.

Use it when

Several controls act on the same selection or document
Formatting that switches on and off
A floating bar of actions over content

Use something else when

Two or three attached buttons with no shared keyboard stop: Button group
Choosing one value among a few: Segmented control
Several on and off options read as one value: Toggle group
Actions tucked behind one button: Dropdown menu

Examples

Code

Import

import { BoldIcon, ItalicIcon, LinkIcon } from "@/components/icons"
import { Toggle } from "@/components/ui/toggle"
import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "@/components/ui/toolbar"

Usage

<Toolbar>
  <ToolbarGroup>
    <ToolbarButton render={<Toggle size="sm" aria-label="Bold" />}>
      <BoldIcon />
    </ToolbarButton>
    <ToolbarButton render={<Toggle size="sm" aria-label="Italic" />}>
      <ItalicIcon />
    </ToolbarButton>
    <ToolbarButton render={<Toggle size="sm" aria-label="Link" />}>
      <LinkIcon />
    </ToolbarButton>
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarGroup>
    <ToolbarButton render={<Toggle size="sm" />}>Heading</ToolbarButton>
    <ToolbarButton render={<Toggle size="sm" />}>Quote</ToolbarButton>
  </ToolbarGroup>
</Toolbar>

Rules

Each `ToolbarButton` renders its control through `render`: `<Toggle size="sm" />` for a state, `<Button />` for an action.
An icon-only control carries an `aria-label` (Bold, Italic, Link).
Related tools sit in a `ToolbarGroup`, with a `ToolbarSeparator` between groups and never at an end.
Words on toolbar buttons are in Title Case (Heading, Quote).