Split button
A React component in Beamline's Actions category.
One obvious action joined to a menu of close alternatives; both halves are real buttons and the menu uses the shared menu rows.
Use it for
- One primary action with a few close variants: Send / Schedule send, Export / Export as CSV.
Not for
- Unrelated actions (dropdown-menu).
- More than about six alternatives.
Anatomy
- main Button
- divider
- menu Button
- menu (MenuItem rows)
Variants
- variant: primary, secondary, accent
- size: sm, md, lg
States
- idle
- loading (menu disabled)
- disabled
- menu open
Keyboard
- Tab reaches each half
- Enter / ↓ on the menu half opens the menu
Motion
Same as Button and the dropdown menu.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | |
onClick | () => void | — | |
actions | MenuItem[] | — | |
variant | "primary" | "secondary" | "accent" | "primary" | |
loading / disabled | boolean | — | |
classNames | SplitButtonClassNames; menuClassNames:MenuClassNames | — | |
style / ref | CSSProperties / native Ref | — | native div |
Dependencies
lucide-react
Import
import { SplitButton } from "@/components/split-button/split-button";Get it
Split button is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent
More in Actions
- Button: The action control: five weights and a brand fill, a buy/sell tone, sm/md/lg and a 44 px touch size, icon-only, a loading state that keeps its size and…
- Confirm morph: A destructive action that asks in place: the button morphs into its question, then into working, then into the result with Undo or Retry, without a dialog.
- Copy button: Copies a value and confirms in place: the icon becomes a check and the label says Copied; a refused copy says so instead of pretending.
- Hold to confirm: Confirms a costly action by holding instead of clicking: a fill sweeps across while held and drains if let go early; pointer, touch, Space and Enter all…
- Swipe actions: Row actions behind a swipe on touch screens, mirrored in a menu at the row's end for pointer and keyboard; a full swipe runs the edge action.
- Theme switch: The light/dark control: the page changes in one of four transitions starting from the button (reveal, eclipse, split, rise), and the icon turns between…