Split Button
分裂按钮
A default action on the left and a dropdown arrow on the right, where the right side reveals other variants of the same action.
Live Demo
Actually clickableNothing pasted yet
What you just saw:"Paste ▼" in Word — click the left side to paste the default format, click the right side to choose "Keep Source Formatting / Paste as Plain Text".
What it actually is
A split button solves the specific problem of "default action plus variants": users hit the left side 90% of the time and the right side 10% of the time to pick a variant. It is more compact than "a button next to a dropdown" and faster than a pure dropdown.
Anatomy · What it's made of
Main Action主动作区
The left side, taking about 70% of the width
Divider分隔线
1px, in the button color or semi-transparent
Toggle Zone下拉触发区
The right side, with a ChevronDown
Menu弹出菜单
The popup menu, expanding downward on tap
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| There is a default action with 2–4 common variants | Yes |
| The default action is used far more often than the variants | Yes |
| Toolbar space is tight but variants still need to be exposed | Yes |
| All options are used about equally often | No |
Past 5 variants, replace the right side with a separate Menu button.
On mobile, finger precision is low and a 34px-wide arrow zone is hard to hit.
Similar Patterns
Don't mix these upSplit ButtonCurrent
分裂按钮
A default action on the left and a dropdown arrow on the right, where the right side reveals other variants of the same action.
Button
按钮
The most basic clickable element in the interface — the user taps it and one thing happens.
In one line:A default action on the left and a dropdown arrow on the right, where the right side reveals other variants of the same action.
How to tell AI
Three levels of promptAdd the component name and specifics
Build a split button: "Paste" as the main zone, with an arrow that opens a menu of Paste Special variants.
Don't just say this to AI
Bad → BetterDon't say this to AI
A button with a small arrow that expands.
Say this instead
Build a split button: "Paste" as the left main action, and on the right a 1px-divided arrow zone (aria-haspopup="menu") that opens the variants menu, with the two zones' radii forming one control.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.