Split button
A primary action with a menu of nearby alternatives.
npm install https://animui.stracture.net/__local/package.tgzLive · 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
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { SplitButton } from 'animui/split-button';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { SplitButton } from "animui/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.