Split Button
分体按钮
Aliases:分裂按钮组合按钮带下拉的按钮主副按钮split button
What is it
A two-part button whose main area runs the default action while an attached arrow opens a menu of related ones. It saves a targeting step compared with a separate button and menu, and hits the frequent action faster than a dropdown whose whole face opens a list. Common for save, send and new-with-variants.
Name disambiguation
Versus a Dropdown the main face runs the default action; versus a separate button and menu the arrow stays visually and focally attached.
Interactive playground
Try it. Make an informed choice.Click the main face and the arrow, comparing a one-shot default with the variant menu.
Loading lab…
What to look for
- 01Main face and arrow are two independent focus targets
- 02The arrow shows expanded state; Esc closes and restores focus
✓ When to use
- One frequent default action plus a few variants of it
- The default must fire in a single click
- Toolbar or form action rows are tight on space
✕ When not to use
- No clear default and all options rank equally — use a dropdown
- Related actions are loosely coupled — a separate button and menu reads clearer
- Only one action exists — a plain button is enough
Variants
Horizontal
水平分体
Main face and arrow side by side — the common form
Vertical
垂直分体
Arrow stacks under the main face for narrow toolbars
With icon
带图标
Icon plus label on the main face for faster recognition
Implementation
display: inline-flexborder-radius: 0position: relativeSeat both halves in an inline-flex row and flatten the seam radius and border so they read as one control; give the arrow a narrow hit area with a chevron. Position the menu absolutely against the container. Each half is its own tab stop; with the menu open, arrows move through items and Esc returns focus to the arrow.
Platform API
<button>aria-haspopup="menu"aria-expandedIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| ARIA APG | Menu Button |
| MUI | ButtonGroup |
| Bootstrap | Split button |
Related concepts
A clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsSimilarA menu of actions popping near its trigger to tuck away secondary operations and keep the interface tidy — the classic form being a "···" more button. The panel floats over content with a shadow; picking an item executes and closes, and destructive actions sit isolated below a divider in red.
ComponentsUsed withA temporary overlay listing actions, opened by click or right-click: flat or grouped command items that execute and close on selection. It houses infrequent actions (more, settings, delete), usually behind a "⋯" button or a context click.
ComponentsUsed withNot to be confused with
A dropdown opens a menu from the whole face; split-button runs an action on the main face
A plain button has one action; split-button folds sibling variants into an attached menu