Core / Buttons
Split Button
Combines a primary action with a small menu of secondary actions.
Preview
import { SplitButton } from "@/components/ui/design-system/core/buttons/SplitButton"
<SplitButton label="Save" options={[{ label: "Save as draft" }]} />Installation
Full library
pnpm install:project /absolute/path/to/your-projectManual install
The guided installer is the next library milestone. This component will be selectable as Core → Buttons → Split Button.
Usage
<SplitButton label="Save" options={[{ label: "Save as draft" }]} />Adopt to your project
Keep the primary action as the most common action. Use options for closely related alternatives, not unrelated navigation.
<SplitButton label="Save" options={[{ label: "Save as draft" }]} / className="rounded-full px-6 shadow-sm">Accessibility
The menu trigger exposes aria-haspopup and aria-expanded. Before broad release, add arrow-key navigation, Escape-to-close, and focus restoration to the component.
API reference
| Attribute | Type | Default | Required | Purpose |
|---|---|---|---|---|
label | ReactNode | — | Yes | Primary action label. |
onClick | () => void | — | No | Primary action handler. |
options | SplitButtonOption[] | [] | No | Menu choices with labels and optional handlers. |
variant | "primary" | "secondary" | "outline" | "ghost" | "destructive" | "primary" | No | Semantic action treatment. |
size | "sm" | "md" | "lg" | "md" | No | Control size. |
radius | "sm" | "md" | "lg" | "xl" | "full" | component default | No | Corner treatment. |
className | string | — | No | Local project styling. |