Split ButtonProv1.0.0
One main action with its alternatives a chevron away, joined into one pill. Use it for other things to do (Save, with Save as draft), or let the menu choose what the main button does and keep showing it (Squash and merge).
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-split-buttonNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { SplitButton } from "@/components/ui/lumen/controls/split-button";
<SplitButton onClick={publish} actions={[{ label: "Schedule", onSelect: schedule }, { label: "Discard draft", onSelect: discard, destructive: true }]}>
Publish
</SplitButton>Props
motion"full""full" | "subtle" | "off"As on Button: subtle is shorter on a calm curve; off is instant. Reduced motion is respected automatically.
children–ReactNodeThe main label. With choices it's optional: the chosen label shows.
onClick–(value: string) => voidThe main action. With choices it receives the chosen value; the menu is disabled while state is "loading".
actions–{ label, description?, onSelect, destructive?, disabled? }[]Other things to do. Destructive ones go last, after a separator, in the danger colour.
choices / value / defaultValue / onValueChange–{ value, label, description? }[]What the main button can do; the menu picks one (a radio group with a check).
variant"default""default" | "secondary" | "outline" | "destructive"Both halves share it.
Show all 9 propsShow fewer
size"default""xs" | "sm" | "default" | "lg"Both halves share it.
icon / state–Button propsOn the main half, as on Button (state: loading, success, error).
menuLabel"More options"stringThe chevron's accessible name.
Source
components/ui/lumen/controls/split-button.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
