# Toolbar (goodtabs UI)

A row of icon buttons in groups with hairlines, tooltips and arrow key focus.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/toolbar.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/toolbar`

## Usage

```tsx
import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "@/components/ui/toolbar"
import { BoldIcon, ItalicIcon, LinkIcon } from "lucide-react"

<Toolbar label="Formatting">
  <ToolbarGroup aria-label="Style">
    <ToolbarButton label="Bold" pressed={bold} onClick={toggleBold}>
      <BoldIcon />
    </ToolbarButton>
    <ToolbarButton label="Italic">
      <ItalicIcon />
    </ToolbarButton>
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarButton label="Add link">
    <LinkIcon />
  </ToolbarButton>
</Toolbar>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` |  | Accessible name. On Toolbar it names the toolbar; on ToolbarButton it is the aria-label and tooltip text. Required on both. |
| size | `"sm" | "default"` | `"default"` | Button size on Toolbar: 28px or 32px. Every ToolbarButton inside follows it. |
| pressed | `boolean` |  | On ToolbarButton: marks a toggle as on, with aria-pressed and the primary fill. |
| children | `ReactNode` |  | On ToolbarButton: the icon. On Toolbar: groups, buttons and separators. |

## When to use

- Editor and canvas controls: formatting, alignment, zoom, history
- A floating action row above a selection or at the top of a panel
- Any set of five or more icon actions that belong together and should be one tab stop

## When not to use

- For two or three standalone actions; use icon buttons on their own
- For mutually exclusive choices with a visible selection; use a toggle group or segmented tabs
- For navigation between pages; use tabs or a navbar

## Notes for agents

- It is radix Toolbar underneath: one tab stop, arrow keys move between buttons, Home and End jump, disabled buttons are skipped
- ToolbarButton is always ghost and sized by the Toolbar; pass onClick from a client component and pressed for toggles
- Toolbar wraps its own TooltipProvider, so tooltips need no setup; separators are decorative
- The frame is rounded-lg with a hairline and 4px padding; pass className="border-0 p-0" to drop it inside another bar

Docs: https://ui.goodtabs.co/components/toolbar