Toolbar

import { Bold, Italic, Redo2, Share2, Underline, Undo2 } from "lucide-react"

import { ToggleGroup } from "@hel/ui/toggle-group"

When to use it#

Use a toolbar when a set of actions belongs together and people will reach for them often: an editor's formatting row, the controls above a table, a drawing tool rail. Putting them in one bar keeps the page's tab order short, because the whole bar is a single stop. Once focus is inside, the arrow keys move from control to control.

For a few unrelated buttons, plain buttons are simpler.

Import#

Copyimport {
  Toolbar,
  ToolbarButton,
  ToolbarToggle,
  ToolbarGroup,
  ToolbarSeparator,
  ToolbarLink,
  ToolbarInput,
  ToolbarItem,
} from "@hel/ui/toolbar"

The parts#

The demo at the top uses most of them: a group for undo and redo, a toggle group for the formatting, separators between the sets, and a button at the end. Every icon-only control has an aria-label, since there is no text for a screen reader to read.

Examples#

Menus and popovers#

To open a menu or a popover from the bar, give the trigger to a ToolbarButton through render. The button stays highlighted while its menu is open.

import { ChevronDown, Search } from "lucide-react"

import {

Tooltips on icon buttons#

Icon-only buttons are easy to misread, so name them with a tooltip. The toolbar button goes inside the tooltip trigger's render, not the other way round.

import { Download, MessageSquare, Pencil, Share2 } from "lucide-react"

import { Toolbar, ToolbarButton, ToolbarSeparator } from "@hel/ui/toolbar"

With a search input#

An input captures the left and right arrow keys to move the text cursor, so a toolbar should hold at most one, and it works best at the end of the bar.

import { ListFilter, Plus } from "lucide-react"

import {

Vertical#

Set orientation="vertical" to stack the controls in a column. The separator turns horizontal, and the arrow keys that move focus switch to up and down.

import { Bold, Italic, MessageSquare, Pencil } from "lucide-react"

import {

Looks and sizes#

The bar has a border and a raised background by default. Use variant="ghost" to drop both when the toolbar sits inside something that already has its own surface. size is sm or md, and it applies to every button and toggle inside unless one sets its own.

To disable the whole bar, put disabled on the Toolbar. To disable a few controls together, put it on a ToolbarGroup, and to disable one, put it on that control.

Keyboard#

Props#

Toolbar#

Give every toolbar an aria-label that says what it controls.

ToolbarButton#

With an icon and no label, the button becomes a square. It also takes every prop of the Base UI toolbar button, such as render and disabled.

ToolbarToggle#

Takes the same props as Toggle, including value, leadingIcon and pressedIcon.

ToolbarGroup, ToolbarSeparator, ToolbarLink and ToolbarInput#

These pass their props straight to the matching Base UI part. ToolbarInput also gets the default field styling.