# Split button

> Dual-action trigger: primary action on the left, trailing chevron on the right opening an aligned dropdown menu.

A unified hairline action button with an integrated chevron dropdown trigger. Clicking the main button triggers the default action; clicking the chevron reveals secondary actions in an aligned floating menu with smooth rotation, keyboard arrow navigation, and zero drop shadows.

## Install

```bash
npx shadcn@latest add https://hairlineui.com/r/split-button.json
```

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

- npm: `lucide-react`
- Hairline UI components it needs (the CLI installs them too): `ui-interaction-motion`
- Docs and live preview: https://hairlineui.com/ui/split-button
- Registry item (source): https://hairlineui.com/r/split-button.json

## Usage

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

<SplitButton
  label="Save changes"
  onClick={() => save()}
  menuItems={[
    { id: "save-draft", label: "Save as draft", onSelect: () => saveDraft() },
    { id: "export", label: "Export backup", onSelect: () => exportBackup() },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | – | Text of the primary action. |
| `onClick` | `() => void` | – | Called when the primary action button is clicked. |
| `menuItems` | `SplitMenuItem[]` | – | List of secondary actions shown in the dropdown menu. |
| `variant` | `"primary" \| "secondary" \| "destructive"` | `"primary"` | Color scheme and visual tone. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Height and typography scale. |
| `loading` | `boolean` | `false` | Shows a spinner inside the primary button. |
| `disabled` | `boolean` | `false` | Disables both primary and dropdown actions. |

## States

- **idle**: Resting dual-action capsule with vertical hairline divider.
- **open**: Menu open with rotated chevron and focused menu item.
- **loading**: Spinner inside primary action with clicks swallowed.

## What it handles

Apps frequently need a primary default action alongside secondary choices. Disconnected buttons waste space; standard dropdowns hide the main action behind an extra click. Split button solves both in one cohesive hairline control.

- **Dual-action trigger**: Independent click handlers for the primary action and the secondary chevron trigger.
- **Aligned floating menu**: Floating menu opens directly below the button’s right edge with hairline borders and zero fuzzy shadows.
- **180° chevron rotation**: Chevron smoothly rotates with organic spring easing when opened.
- **Keyboard accessible**: Navigate open menu items with ArrowUp, ArrowDown, Home, End, and dismiss with Escape.

## Replaces

separate action + dropdown buttons, extra click menus for default actions

## Where it fits

- **Publish & deploy**: Primary "Publish" action with dropdown options for "Schedule" or "Publish as draft".
- **Save & export**: "Save" main action paired with "Export as PDF" or "Export as JSON".
- **Git & release**: "Commit changes" with "Commit and push" or "Create PR" secondary options.

## Notes

- No external dropdown library dependency: lightweight self-contained menu logic with full keyboard handling.
- Clicking outside or pressing Escape cleanly closes the menu.

License: MIT (https://hairlineui.com/license#components)