Toolbar · paneui

Installation

pnpm dlx shadcn@latest add @paneui/toolbar

Usage

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

<Toolbar variant="floating" aria-label="Format">
  <ToolbarToggle aria-label="Bold" pressed={bold} onPressedChange={setBold}>
    <BoldIcon />
  </ToolbarToggle>
  <ToolbarSeparator />
  <ToolbarButton aria-label="Link"><LinkIcon /></ToolbarButton>
</Toolbar>

Composition

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

Examples

Document Bar

Inset

Keyboard

The toolbar is one tab stop. Arrow keys move between items (looping) and Home / End jump to the ends. Menu and popover triggers join the loop with render={<ToolbarButton />}.

Radii

floating is rounded-xl with p-1, so its 28px items take rounded-inner (10px). The plain variant falls back to rounded-lg items.

API Reference

Built on the Toolbar primitive. Only the props this library adds or changes are listed; everything else passes through.

Also accepts every prop of Toolbar.Root.

variant= "default": "default" | "floating" | "inset"; floating is the popover surface for selection bubbles; inset sits in a well.

Prop	Type	Default	Description
variant	"default" \| "floating" \| "inset"	"default"	`floating` is the popover surface for selection bubbles; `inset` sits in a well.

ToolbarButton

Also accepts every prop of Toolbar.Button.

size= "icon": "icon" | "label"; icon is a 28px square; label adds padding for text.

Prop	Type	Default	Description
size	"icon" \| "label"	"icon"	`icon` is a 28px square; `label` adds padding for text.

data-pressed: Set it yourself for a toggled look on a non-toggle (an active link).

Data attribute	Description
data-pressed	Set it yourself for a toggled look on a non-toggle (an active link).

ToolbarToggle

A toggle inside the toolbar. Also accepts every prop of Toolbar.Button.

pressed: boolean; Controlled pressed state.
defaultPressed: boolean; Uncontrolled initial state.
onPressedChange: (pressed: boolean) => void; Called when toggled.
size= "icon": "icon" | "label"; As on ToolbarButton.

Prop	Type	Default	Description
pressed	boolean	—	Controlled pressed state.
defaultPressed	boolean	—	Uncontrolled initial state.
onPressedChange	(pressed: boolean) => void	—	Called when toggled.
size	"icon" \| "label"	"icon"	As on ToolbarButton.

ToolbarSeparator

Also accepts every prop of Toolbar.Separator.

ToolbarGroup

Also accepts every prop of Toolbar.Group.

ToolbarInput

Also accepts every prop of Toolbar.Input.

ToolbarLink

Also accepts every prop of Toolbar.Link.