Lead: Asaf Ben-OvedONGOING
Description
A split button couples a primary action with an attached dropdown menu of related actions
Usage & Behaviour
General guidelines
Text
The label should address the primary action of the button. See additional guidelines in Buttons#Labels
Structure
The split button is separated into two areas: the label/icon and the arrow icon. The separator between them signals that the two areas result in different actions.
The icon which opens the menu acts as a menu (see more information in Drop Down Menu
Order
For the items within the menu - by popularity - when there are a few available items (e.g. less than 5)
Internal Logic
The primary action should appear in the menu and indicated as selected
The Displayed action and menu icon are treated as 2 distinct buttons with their own states
See example for hover state:
Default Selection
The primary action should be the most common use case, while the dropdown menu shows a list of related actions.
Persistent split button <<?Can the default be changed - according to the menu?>>. The default is kept until the user makes a different selection which then becomes the default.
States
State | Image | Comment |
|---|---|---|
Semi Enabled | The menu can also contain specific disabled actions while the Primary is enabled and vice versa | |
Hover |  | the color of the button changes and the cursor indicates that you cannot click the split button |
Active |  | |
Disabled |  | |
Semi Enabled | <TBD> | |
Error |  |
Interaction
Clicking the primary action on the left, the action is activated.
clicking on the arrow, it exposes a menu of alternative actions
Clicking an action will commit the action and close the menu
If the split button is selected using keyboard actions and then Enter is pressed, the primary action occurs.
Best practice
Use:
This pattern is used when there are many possible actions but only one primary action
Use a split button only if the actions are related and only one of the actions in commonly used
Typically placed in the main toolbar
Don't Use:
For navigation, only for actions
Design
Zeplin link | Screen thumbnail |
|---|---|
 | |