Description
A split button groups actions together in a Drop-Down Menu, with one primary action and a set of related actions.
 |
Usage & Behaviour
General guidelines
Structure
The split button consists of:
an action area, with a label or icon showing the primary action.
an arrow icon.
The separator between these two areas signals that they have different actions.
 |
The arrow icon opens an action menu, as a Drop-Down Menu.
 |
Content
The label in the action area should be the primary action.
See the main Buttons information for guidelines on labels.
See Drop-Down Menu for the order of options.
Internal Logic
The action area and the drop-down arrow area are treated as 2 distinct buttons, with their own separate states. For example, they have separate hover states:
 |
 |
The primary action should also be shown in the action menu.
The button has 2 modes of operations:
Persistent split button - the default action is kept until the user makes a different selection, which then becomes the default.
Fixed split button - the primary action is kept as the default, even when the user selects another option.
The action menu closes when the user makes a selection.
States
Regular | | |
Hover | | |
Active | | |
Disabled |  | |
Error |  | |
Warning |  | |
Focused |  | |
Focused, Hover |   | |
Focused, Active |   | |
Focused, Disabled |  |
Interaction
Clicking the left-hand action area triggers the primary action.
Clicking the right-hand drop-down arrow opens an action menu of alternative actions.
Clicking an action in the action menu. triggers the related action.
Best practice
Use:
when there are many possible related actions, but only one primary action.
if the actions are related but only one of the actions is commonly used.
Don't use:
for navigation → use Links.
when there are a lot of related actions (more than 5 or 6) → consider using an Action Menu.
Accessibility compliance
In Focus state:
Clicking the Enter key will initiate the primary action.
Clicking the drop-down arrow will open the menu.
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |