Reference
Split Button
A primary action with its alternatives one seam away: the main button fires `click`, the fitted arrow opens a paper vessel of the same register whose entries emit `select` with their value. The arrow is the menu machine's trigger grafting our button via `asChild` — the machine keeps the element (positioning, focus, `data-state`), the button recipe dresses it. The popup keeps the menu parts untouched.
Item · Root · Trigger
#SplitButton
A primary action with its alternatives one seam away: the main button
fires click, the fitted arrow opens a paper vessel of the same
register whose entries emit select with their value. The arrow is
the menu machine's trigger grafting our button via asChild — the
machine keeps the element (positioning, focus, data-state), the
button recipe dresses it. The popup keeps the menu parts untouched.
| Prop | Type | Default | Description |
|---|---|---|---|
label | String | The main action's label. | |
items | Array as PropType<SplitButtonEntry[]> | () => [] | The dropdown's entries. |
variant | String | "solid" | How both halves rest; the arrow always reads as one control with the main button. |
tone | String | "ink" | The pigment the halves are inked with; ink is the solemn default, and the fixed pigments speak for their meaning. |
size | String | "md" | One rung of the control-height ladder for both halves. |
disabled | Boolean | false | — |
| Event | Payload |
|---|---|
click | () => true |
select | (value: string) => typeof value === "string" |