# Split button (goodtabs UI)

A primary action with a chevron that opens a menu of alternatives.

## Install

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

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

## Usage

```tsx
import { SplitButton } from "@/components/ui/split-button"

<SplitButton
  label="Save"
  onClick={save}
  items={[
    { label: "Save as draft", onSelect: saveDraft },
    { label: "Save and close", onSelect: saveAndClose },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` |  | Text of the main button. |
| onClick | `() => void` |  | Runs when the main button is clicked. |
| items | `{ label: string; onSelect: () => void; destructive?: boolean }[]` |  | The alternatives in the menu, in order. |
| variant | `"default" | "outline" | "secondary"` | `"default"` | Look of both halves. |
| size | `"sm" | "default"` | `"default"` | Height of both halves: 28px or 32px. |
| menuLabel | `string` | `"More options"` | Accessible name of the chevron button. |
| disabled | `boolean` | `false` | Disables both halves. |

## When to use

- One obvious action with two to five close alternatives: save, merge, export, run
- Dialog and editor footers where a second full button would compete with the first
- When the alternatives are variations of the main action, not unrelated commands

## When not to use

- When the alternatives are as common as the main action; show them as separate buttons
- For navigation or settings; use a dropdown menu or a select
- For a single action with no alternatives; use Button

## Notes for agents

- It takes functions (onClick, items[].onSelect), so the component rendering it must be a client component
- The chevron is a real button named by menuLabel with aria-haspopup and aria-expanded from radix
- Items with destructive: true use the dropdown menu's destructive item variant; keep that for actions that cannot be undone
- size and variant apply to both halves; the main button has no icon slot, keep the label short

Docs: https://ui.goodtabs.co/components/split-button