Split button
A primary action with a menu of nearby alternatives.
pnpm dlx shadcn@latest add @uiarc/split-buttonLive · keyboard ready
- One default action with a few close variants, like Merge with Squash and Rebase.
- Export or share actions where one format is the usual pick and others sit behind the chevron.
- Copy actions that swap the label to Copied in place while offering alternatives.
- Use dropdown-menu when there is no default action and every option is equal.
- Use button when there are no alternatives.
- Use context-menu for actions tied to a piece of content rather than a toolbar.
Installation
Add Split button with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/split-buttonAdds the component and its local dependencies, and installs @radix-ui/react-dropdown-menu, motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { SplitButton } from "@/registry/components/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 }, ]} /> );}SplitButton
A primary action joined to a chevron that opens a Radix dropdown of related actions.
PropTypeDefaultDescription
labelRequiredstring–Main action label. Changes morph letter by letter.actionsRequiredSplitButtonAction[]–Menu items: { label, onSelect?, disabled?, destructive?, icon? }.onClick() => void–Runs the main action.iconReactNode–Leading icon on the main half. A different icon element crossfades in.variant"primary" | "secondary""primary"Visual weight of both halves.disabledboolean–Disables both the main action and the menu trigger.- EnterorSpace
- Runs the main action, or opens the menu from the chevron.
- ArrowDownorArrowUp
- Moves between menu items, looping at the ends.
- Escape
- Closes the menu and returns focus to the chevron.
- Two native buttons; the chevron is labelled "<label> more actions".
- The menu is a Radix DropdownMenu with menu and menuitem roles and focus management.
- The main label is announced through a polite live region when it changes.
- The main label and icon morph in place while its width springs; the menu half never scales, so the menu opens from a still anchor.
- Menu items fade in with a short stagger.
- Reduced motion removes the press scale, width spring, and menu transform, leaving a quick opacity fade.
- The menu opens aligned to the end of the button with 12px collision padding, so it stays on screen near viewport edges.
- The secondary variant sets a 142px minimum on the main half; the pair does not collapse on narrow screens, so give it its own row on mobile.
- The main label animates per letter with a ResizeObserver-driven width spring; the menu mounts only while open through a Radix portal.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use when one action is the default and two to five close variants exist. For a menu with no default action use dropdown-menu.
- Keep the menu actions as variations of the main action; put unrelated commands elsewhere.
- Swap label and icon (Copy page → Copied) to show the result in place.
The full library index for assistants is at /llms.txt.