Toolbar

A container for grouping a set of controls, such as buttons, toggle groups, or links, built on the Base UI Toolbar primitive.

TSX
import {
  AlignLeftIcon,
  AlignRightIcon,
  BoldIcon,
  ItalicIcon,
  UnderlineIcon,
} from "lucide-react";

import { Toggle } from "@/components/ui/toggle";
import { ToggleGroup } from "@/components/ui/toggle-group";
import {
  Toolbar,
  ToolbarButton,
  ToolbarLink,
  ToolbarSeparator,
} from "@/components/ui/toolbar";

export default function ToolbarDemo() {
  return (
    <Toolbar>
      <ToggleGroup
        multiple
        defaultValue={["bold"]}
        aria-label="Text formatting"
      >
        <ToolbarButton
          render={<Toggle />}
          aria-label="Toggle bold"
          value="bold"
        >
          <BoldIcon />
        </ToolbarButton>
        <ToolbarButton
          render={<Toggle />}
          aria-label="Toggle italic"
          value="italic"
        >
          <ItalicIcon />
        </ToolbarButton>
        <ToolbarButton
          render={<Toggle />}
          aria-label="Toggle underline"
          value="underline"
        >
          <UnderlineIcon />
        </ToolbarButton>
      </ToggleGroup>
      <ToolbarSeparator />
      <ToggleGroup defaultValue={["align-left"]} aria-label="Alignment">
        <ToolbarButton
          render={<Toggle />}
          aria-label="Align left"
          value="align-left"
        >
          <AlignLeftIcon />
        </ToolbarButton>
        <ToolbarButton
          render={<Toggle />}
          aria-label="Align right"
          value="align-right"
        >
          <AlignRightIcon />
        </ToolbarButton>
      </ToggleGroup>
      <ToolbarSeparator />
      <ToolbarLink href="#">Edited 2 hours ago</ToolbarLink>
    </Toolbar>
  );
}

Installation

Bash
Package manager:npmpnpmyarnbun
npx shadcn@latest add @sevenui/toolbarpnpm dlx shadcn@latest add @sevenui/toolbaryarn dlx shadcn@latest add @sevenui/toolbarbunx --bun shadcn@latest add @sevenui/toolbar

Usage

TSX
"use client";

import { Toggle } from "@/components/ui/toggle";
import { ToggleGroup } from "@/components/ui/toggle-group";
import {
  Toolbar,
  ToolbarButton,
  ToolbarLink,
  ToolbarSeparator,
} from "@/components/ui/toolbar";

export default function ToolbarDemo() {
  return (
    <Toolbar>
      <ToggleGroup multiple defaultValue={["bold"]} aria-label="Text formatting">
        <ToolbarButton render={<Toggle />} aria-label="Toggle bold" value="bold">
          B
        </ToolbarButton>
      </ToggleGroup>
      <ToolbarSeparator />
      <ToolbarLink href="#">Edited 2 hours ago</ToolbarLink>
    </Toolbar>
  );
}

API reference

Toolbar is a Base UI bonus primitive absent from shadcn/ui, like Meter and Number Field.

Toolbar

Extends the Base UI Toolbar Root — renders <div role="toolbar">. Arrow keys move roving focus across button, link, and input items (skipping disabled ones); Home/End jump to the first/last item.

ToolbarButton

Renders a native <button>, but — like Tabs.Tab and Accordion.Trigger — it passes focusableWhenDisabled: true internally: a disabled button stays focusable and receives aria-disabled="true" instead of the native disabled attribute, so it remains keyboard-reachable and tooltips still open on it. Style the disabled state with data-disabled:, not the disabled: Tailwind variant.

ToolbarLink and ToolbarInput

Render a native <a> and <input>. Use at most one input, placed last in the toolbar — arrow keys move focus between items, which conflicts with cursor movement inside a text field.

ToolbarGroup and ToolbarSeparator

ToolbarGroup groups related items — give it an aria-label. ToolbarSeparator’s orientation defaults to the opposite of the toolbar’s (a horizontal toolbar renders a vertical separator line); its data-orientation reflects the separator’s own orientation.

Composition

Popup triggers (AlertDialog, Dialog, Menu, Popover, Select) render inside ToolbarButton — <ToolbarButton render={<MenuTrigger />} />. Tooltip is inverted — <TooltipTrigger render={<ToolbarButton />} />. Toggle buttons render as <ToolbarButton render={<Toggle />} value="…" /> inside a Toggle Group, which owns the pressed state: give each button a value, set the initially pressed ones with defaultValue={[...]}, and add multiple for a multi-select group.