Toolbar

A toolbar puts the controls for one context on a single shell, like an editor's formatting bar or a canvas's tool palette. Tab enters and leaves it in one stop, and arrow keys move between controls.

For a short row of actions without arrow keys, use ButtonGroup. For one set of exclusive options, use ToggleGroup.

Preview#

"use client";
 
import { HugeiconsIcon } from "@hugeicons/react";
import {
  Link01Icon,
  MoreHorizontalIcon,

Installation#

npxnpx shadcn@latest add @cubby-ui/toolbar

Usage#

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

<Toolbar>
  <ToolbarToggle />
  <ToolbarSeparator />
  <ToolbarToggleGroup>
    <ToolbarToggle />
  </ToolbarToggleGroup>
  <ToolbarButton />
</Toolbar>

Composition#

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

Leave variant unset on ToolbarButton; it takes the toolbar's quiet style. To open a menu, popover, or dialog, render its trigger as a ToolbarButton.

<DropdownMenuTrigger render={<ToolbarButton aria-label="More" />}>
  <MoreIcon />
</DropdownMenuTrigger>

The toolbar never gets narrower than its controls. If it may not fit on small screens, put it in a container that scrolls sideways, such as a ScrollArea with nativeScroll. To let a flex-1 ToolbarInput shrink instead, pass className="min-w-0" to the toolbar.

Examples#

Variants#

Use variant to pick the shell the controls sit on.

"use client";
 
import { HugeiconsIcon } from "@hugeicons/react";
import {
  Redo02Icon,
  TextBoldIcon,

Size#

Use size to match the toolbar to a Button of the same size; its controls scale their padding, text, and icons with it.

"use client";
 
import { HugeiconsIcon } from "@hugeicons/react";
import {
  Redo02Icon,
  TextBoldIcon,

With Input#

Use ToolbarInput for a quiet field in the row; give one button a variant to mark the main action.

"use client";
 
import { HugeiconsIcon } from "@hugeicons/react";
import { FilterHorizontalIcon } from "@hugeicons/core-free-icons";
 
import {

Orientation#

Set orientation="vertical" for a tool palette; arrow keys follow the axis.

"use client";
 
import { HugeiconsIcon } from "@hugeicons/react";
import {
  CircleIcon,
  Cursor01Icon,

Accessibility#

Labels#

Give the toolbar an aria-label that names what it controls ("Text formatting"), and every icon-only control its own.

Keyboard#

Tab moves focus into and out of the toolbar in one stop. Arrow keys move between controls, and focus loops unless you set loopFocus={false}. A disabled control stays focusable, so keyboard users can still find it.

Toggles#

ToolbarToggle exposes its state with aria-pressed, and a pressed toggle keeps a deeper tint than hover. In forced-colors mode a pressed toggle gets a Highlight border.

API Reference#

The Toolbar 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.

Props#

Toolbar#

The shell. Wraps Base UI's Toolbar.Root.

ToolbarButton#

A quiet Button in the toolbar. Wraps Base UI's Toolbar.Button and takes Button's props.

Notes#

ToolbarToggle#

A Toggle that stays pressed when on. Wraps Base UI's Toolbar.Button and takes Toggle's props except variant and size.

ToolbarToggleGroup#

Toggles that share a value, like text alignment. Wraps Base UI's ToggleGroup and lays its items into the toolbar's row.

ToolbarGroup#

Groups controls, for example to disable them together with disabled. Wraps Base UI's Toolbar.Group and adds no layout.

ToolbarSeparator#

A line between controls, across the toolbar's axis. Arrow keys skip it.

ToolbarInput / ToolbarLink#

A quiet field and a quiet link. Wrap Base UI's Toolbar.Input and Toolbar.Link.

Upgrading#

If you're reinstalling over an earlier version, check these changes: