127 Components
Split Button
ButtonsA primary action fused with a chevron trigger that reveals related actions in a spring-timed dropdown, sharing a single pill silhouette.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/split-button.json"
Props
TypeScript props supported by <SplitButton />.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | — | Label for the primary (left) action button. |
| optionsrequired | SplitButtonOption[] | — | Dropdown options revealed by the chevron trigger. |
| onClick | () => void | — | Callback invoked when the primary action button is pressed. |
| size | "sm" | "md" | "lg" | "md" | Padding and typography scale of the split button. |
| variant | "primary" | "secondary" | "danger" | "info" | "primary" | Visual style of both halves of the control. |
| disabled | boolean | false | Disables both the primary button and dropdown trigger. |
| className | string | — | Additional CSS classes applied to the root wrapper. |
Key Features
- Primary action and chevron trigger share a single rounded pill silhouette.
- Chevron rotates with a snappy spring on open/close.
- Menu flips above the trigger when there is not enough room below.
- Supports primary, secondary, danger, and info visual variants.
- Closes automatically on outside click and Escape.
Keyboard & Accessibility
- Chevron trigger uses aria-haspopup="menu" and aria-expanded to announce state.
- Dropdown uses role="menu" with role="menuitem" items.
- Arrow Up/Down, Home, and End move roving focus between enabled items.
- Enter/Space selects the active item; Escape closes and returns focus to the trigger.
- Tab closes the menu without trapping focus.
- Respects prefers-reduced-motion by collapsing spring transitions to instant.