Toolbar

A toolbar groups related buttons, links, and inputs into a single horizontal or vertical strip with arrow-key navigation between its controls. Use it for a formatting bar, a media player's transport controls, or any cluster of actions that act on the same context.

Preview

Installation

npx shadcn@latest add @cubby-ui/toolbar

Usage

import {
  Toolbar,
  ToolbarButton,
  ToolbarSeparator,
  ToolbarGroup,
} from "@/components/ui/cubby-ui/toolbar"

<Toolbar>
  <ToolbarGroup>
    <ToolbarButton />
  </ToolbarGroup>
  <ToolbarSeparator />
</Toolbar>

Composition

Toolbar
├── ToolbarGroup
│   └── ToolbarButton
├── ToolbarSeparator
├── ToolbarInput
└── ToolbarLink

Wrap related buttons in ToolbarGroup to keep them visually clustered, and use ToolbarSeparator to divide groups. ToolbarButton defaults to the ghost button variant.

Examples

With Input

Use ToolbarInput to place a text field inline with the toolbar's buttons.

Accessibility

Keyboard navigation

The toolbar manages a single tab stop with a roving tabindex: Tab moves focus into and out of the whole toolbar, and the arrow keys move between controls inside it. Match the arrow direction to the layout by setting orientation to "horizontal" or "vertical".

Label icon-only buttons

A ToolbarButton with only an icon has no text for a screen reader to announce. Give it an aria-label describing the action.

<ToolbarButton aria-label="Bold">
  <BoldIcon />
</ToolbarButton>

API Reference

The Toolbar component is built on top of Base UI's Toolbar. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI Toolbar documentation.

Modified Defaults

Our implementation changes the following Base UI prop defaults on ToolbarButton:

• variant: defaults to "ghost" (Base UI Button defaults to "solid")
• size: defaults to "default" (standard Base UI default, but made explicit with buttonVariants)