# Glass toolbar (goodtabs UI)

A pill of icon actions on glass with roving focus and arrow key movement.

## Install

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

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

## Usage

```tsx
import { GlassToolbar, GlassToolbarButton, GlassToolbarSeparator } from "@/components/ui/glass-toolbar"

<GlassToolbar aria-label="Editing">
  <GlassToolbarButton aria-label="Undo"><Undo2Icon /></GlassToolbarButton>
  <GlassToolbarSeparator />
  <GlassToolbarButton aria-label="Share"><ShareIcon /></GlassToolbarButton>
</GlassToolbar>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| aria-label | `string` |  | Required name on GlassToolbar, and on every GlassToolbarButton. |
| size | `"icon-sm" | "sm"` | `"icon-sm"` | On GlassToolbarButton. icon-sm is 28px square, sm is 28px tall with a label. |

## When to use

- Floating actions over an image, a canvas or a video
- Three to eight related actions that belong together

## When not to use

- Navigation between pages: use links
- Dense app chrome on a flat background, where a plain toolbar is calmer

## Notes for agents

- It is the radix toolbar: role toolbar, one tab stop, Left and Right move, Home and End jump. Icon-only buttons must have an aria-label
- Pass size sm with a text child for a labelled action
- The pane is inline-flex and as wide as its content, so centre it with the parent

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