A split button whose chevron opens a menu of alternative actions; choosing one swaps the primary label with a rolling transition. Full keyboard support with arrows, Home, End and Escape.
#482 · feat/billing-webhooks
Retry failed payment webhooks with backoff
All checks have passed
12 successful checks · no conflicts
npx shadcn@latest add https://hyperblur.dev/r/button-split-menu.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-split-menu.tsx.
import { ButtonSplitMenu } from "@/components/hyperblur/button-split-menu"
<ButtonSplitMenu onAction={(id) => merge(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| options | { id: string; label: string; action?: string; description?: string }[] | 3 merge strategies | Menu entries. action is the text on the primary button when that entry is selected. |
| value | string | undefined | Controlled selected id. |
| defaultValue | string | first option | Initial selected id when uncontrolled. |
| onValueChange | (id: string) => void | undefined | Called when a menu entry is chosen. |
| onAction | (id: string) => void | undefined | Called when the primary half is clicked, with the selected id. |
| placement | "bottom" | "top" | "bottom" | Opens the menu below or above the button. |
| align | "start" | "end" | "end" | Aligns the menu to the left or right edge. |
| menuLabel | string | "More merge options" | Accessible label of the chevron and the menu. |
| accent | string | "#2ea05b" | Button color and check color. |
| disabled | boolean | false | Disables interaction and dims the control. |