Split Button
ProA dual-action button combining a primary action with a dropdown trigger for secondary alternatives. The left section performs the default action; the right chevron opens a menu of related options. Available in Primary and Secondary variants.
12 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Primary | High-emphasis split button with brand-colour fill. | Use when the default action is the primary CTA and alternatives are secondary. |
| Secondary | Medium-emphasis split button with outline styling. | Use when the split action supports other elements on the page. |
| Tertiary |
Usage Guidelines
Do
Make the default (left) action the most commonly used option.
Don't
Mix unrelated actions in the dropdown — use a standalone Dropdown Menu instead.
Do
Group related actions only — all options should be variations of the same task.
Don't
Use Split Button for navigation — it's for actions only.
Do
Keep the dropdown menu short — 2 to 5 alternatives maximum.
Don't
Place multiple Split Buttons in the same row.
Code
Design Tokens
Accessibility
- Primary action and dropdown trigger are two separate focusable elements.
- Dropdown trigger has aria-haspopup="true" and aria-expanded reflecting state.
- Menu items are navigable with arrow keys.