Toolbar

StableBase UI

Live preview

Installation

pnpm dlx shadcn@latest add @sc1m/toolbar

This also merges the token layer and installs src/lib/cn.ts plus @base-ui/react. For the manual route — prerequisites, components.json, and app-level setup — see Installation.

Usage

import {
  Toolbar,
  ToolbarButton,
  ToolbarLink,
  ToolbarSeparator,
  ToolbarGroup,
  ToolbarInput,
} from "@/components/ui/toolbar";

Composition

Every part is a separate export. Toolbar owns state; the rest are presentational and must appear in this order.

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

Example

The preview above, with its source. This is the demo module verbatim, so the code and the thing it renders cannot drift apart.

<Toolbar aria-label="Text formatting">
  <ToolbarGroup>
    <ToolbarButton>Bold</ToolbarButton>
    <ToolbarButton>Italic</ToolbarButton>
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarLink href="#">Docs</ToolbarLink>
</Toolbar>

API reference

Each part forwards every prop of its Base UI counterpart; the tables list the ones declared on the part itself. See Base UI's reference for the inherited element props.

PropTypeDefaultDescription

disabledboolean—

orientationToolbarRoot.Orientation'horizontal'The orientation of the toolbar.

loopFocusbooleantrueIf true, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached.

ToolbarButton

PropTypeDefaultDescription

disabledbooleanfalseWhen true the item is disabled.

focusableWhenDisabledbooleantrueWhen true the item remains focusable when disabled.

ToolbarSeparator

PropTypeDefaultDescription

orientationOrientation—The orientation of the separator.

ToolbarGroup

PropTypeDefaultDescription

disabledbooleanfalseWhen true all toolbar items in the group are disabled.

ToolbarInput

PropTypeDefaultDescription

disabledbooleanfalseWhen true the item is disabled.

focusableWhenDisabledbooleantrueWhen true the item remains focusable when disabled.

defaultValueReact.ComponentProps<'input'>['defaultValue']—

Accessibility

Behaviour, focus management, and ARIA wiring come from Base UI's Toolbar — see its reference for the full keyboard map.

Keyboard focus draws a 2px ring in --ring, never removed — only shown on :focus-visible, so a pointer press does not paint one.

Design tokens

The component reads semantic tokens only — no raw colour, radius, or duration appears in its source. Override the token, not the component.

TokenApplied to

--brand-radius-lgToolbar

--brand-radius-mdToolbarButton, ToolbarLink, ToolbarInput

--fgToolbarButton, ToolbarLink, ToolbarInput

--lineToolbar, ToolbarSeparator, ToolbarInput

--ringToolbarButton, ToolbarLink, ToolbarInput

--shadow-raisedToolbar

--surfaceToolbarButton, ToolbarLink, ToolbarInput

--surface-raisedToolbar

Source

src/components/ui/toolbar/toolbar.tsx — no next/* imports, so it drops into any React 19 + Tailwind v4 app.

On this page