# Split Button

A main action and a chevron that opens a menu of related ones, joined into one control.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/split-button
```

## Usage

```tsx
import { SplitButton } from '@/components/fetaui/split-button'
import { SendIcon } from '@fetaui/react/rounded/send'

const entries = [
  { label: 'Schedule send', onSelect: schedule },
  { label: 'Save as draft', onSelect: saveDraft },
]

export function SendActions() {
  return <SplitButton label="Send" leadingIcon={<SendIcon />} onClick={send} menuLabel="More send options" entries={entries} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| variant | secondary, outline, primary | secondary |
| size | sm, md, lg | md |
| shape | soft, pill | soft |
| label | string | required |
| leadingIcon | ReactNode |  |
| onClick | () => void |  |
| menuLabel | string | More options |
| entries | MenuEntry[] from Dropdown Menu | required |
| align | start, end | end |
| status | idle, loading, success | idle |
| loadingLabel | ReactNode | label |
| successLabel | ReactNode | label |
| onSuccessEnd | () => void |  |
| open | boolean |  |
| onOpenChange | (open) => void |  |
| disabled | boolean | false |
| animated | boolean | true |
| className | string |  |

## When to use

- One action people take most of the time, with a few variations of it, like Send and Schedule send.
- A page header action such as Copy page with export and share options behind it.

## When not to use

- For unrelated actions: use a More Icon Button with a Dropdown Menu.
- When every option is equally likely: use a Dropdown Menu or a Select.
- For a single action: use a Button.

## Accessibility

- Two real buttons in a labelled group. The chevron has aria-haspopup menu, aria-expanded and its own name from menuLabel.
- The menu is Dropdown Menu's: role menu, items with role menuitem, and type ahead.
- Link items are real links, so they open in a new tab and can be copied. A new tab link gets rel noopener noreferrer.
- On Mobile each segment has a hit area of at least 44 px.

## Motion

- The whole control presses as one shape, scaling to 0.98, so the join never opens. The label draws on hover and waves on press.
- The chevron turns 180 degrees while the menu is open.
- The menu scales from 0.96 and fades in over 160 ms from the corner under the chevron.
- Loading shows a spinner and success a tick with a past tense label for 1.6 s, as on Button.
- With reduced motion or animated false, the menu fades without scaling and nothing else moves.