Actions
Split Button
Split Button is a button pattern that combines one primary default action with an adjacent dropdown for closely related alternative actions (e.g. "Save" + a chevron revealing "Save as draft" / "Save and publish").
Style × Size — 9 variants
Figma documentedReact not implementedDocumentation only
This page documents the Figma component and usage rules. It is not a production-ready React implementation and does not include a live preview.
- Figma availability
- available
- React availability
- unavailable
- Documentation completeness
- partial
- Maturity
- documented
Purpose
Split Button is a button pattern that combines one primary default action with an adjacent dropdown for closely related alternative actions (e.g. "Save" + a chevron revealing "Save as draft" / "Save and publish").
When to use
When there's one clear default action but a few related variants a user occasionally wants instead.
When not to use
When all options are equally likely to be chosen — use a plain Dropdown Menu or Select instead. Split Button implies a clear default.
Accessibility
The main action and the chevron trigger are two independently focusable, independently labeled controls in code (two real <button> elements) — never one button with an ambiguous combined action.
Common mistakes
Treating this as a single button. It is two separate interactive targets sharing one visual container, and must be built and labeled as such.
Properties
Style × Size as variants. Label (text) for the main action only.
Tokens used
component/radius/controlsemantic/action/primarysemantic/border/default