Split Button
A split button is a combination of a regular button and a drop-down button.
Anatomy
A split button consists of the main action on the left and a drop-down button that shows a dropdown with less common actions on the right:
When to use
More than two related actions
When there are more than two actions related to the main action, and there is not enough space for separate buttons, put these actions into the dropdown menu:
The second action is dangerous and uncommon
Dangerous actions can destroy users’ data and cannot be easily undone. To avoid accidental clicks on a dangerous action, you can hide it in the dropdown menu if this action is uncommon, for example Force Push:
An uncommon dangerous action can be the only action in the menu.
When not to use
Unrelated actions
If unrelated actions are hidden under the dropdown menu, they are hard to find:
Incorrect
Correct
Only one related action
Putting the single action in the dropdown menu doesn't save a lot of space:
Incorrect
Correct
How to use
Main action
Refer to the regular button rules.
Dropdown button
Click
Show the dropdown menu with secondary actions.
Hide the menu when clicking outside the menu or on the second dropdown button click.
Hover
Show a tooltip:
Dropdown menu
Place related actions into the dropdown menu. Do not duplicate the main action in the dropdown menu, otherwise it is confusing how to trigger the main action — with the button or from the menu.
Incorrect
Correct
If there is a dangerous action among other actions in the dropdown, add the line separators above and below it to lessen the chance of calling this action by mistake:
Keyboard navigation & shortcuts
Trigger the main action when the default button shortcut is pressed if the split button is the default one.
Open the dropdown menu with the first menu item selected on Alt+Shift+Enter.
Do not show the dropdown menu when the button gains focus.
Focus on the button
Space | Invoke the main action. |
Arrow Down | Show the dropdown menu with secondary actions and move focus to the first item in the menu. |
Tab Shift + Tab | Move focus to the control next to the split button and hide the dropdown menu. |
Focus on the dropdown menu
Enter Space | Invoke the selected action. |
Arrow Down Arrow Up |
|
Esc | Close the dropdown menu and move the focus to the split button. |