Split Button
A compound button joining a primary action with a dropdown menu of secondary actions and spring-animated width.
Installation
npx viora-ui@latest add split-buttonpnpm dlx viora-ui@latest add split-buttonnpx viora-ui@latest add split-buttonbunx viora-ui@latest add split-buttonStep 1: Install Dependencies
npm install @radix-ui/react-dropdown-menu motion lucide-reactStep 2: Copy the Source Code
Copy split-button.tsx into your @/components/arc/split-button/ directory.
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 },
]}
/>
);
}Props
| 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. |
icon | ReactNode | — | Optional icon displayed alongside label. |
variant | "primary" | "secondary" | "primary" | Button visual variant. |
disabled | boolean | false | Disables both buttons. |
Built by Otis
Last updated: 10/12/2026