A compound button joining a primary action with a dropdown menu of secondary actions and spring-animated width.
Installation
Usage
import { SplitButton } from "@/components/arc/split-button/split-button";
export function MergeButton() {
return (
<SplitButton
label="Merge pull request"
onClick={merge}
actions={[
{ label: "Squash and merge", onSelect: squash },
{ label: "Rebase and merge", onSelect: rebase },
{ label: "Close pull request", onSelect: close, destructive: true },
]}
/>
);
}API Reference
SplitButton
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Label for the main action button. |
| actions | SplitButtonAction[] | [] | Array of actions for the dropdown menu. |
| onClick | () => void | — | Click handler for the primary button half. |
| variant | "primary" | "secondary" | "primary" | Button visual variant. |
| disabled | boolean | false | Disables both buttons. |
Built by Otis
Last updated: 10/12/2026