...
A split button groups actions together in a Drop-down Menu, with one primary action and a set of related actions.
...
Usage & Behavior
General guidelines
...
The arrow icon opens an action menu, as a Drop-down Menu.
...
Content
The label in the action area should be the primary action.
The width of the action menu should adapt to the longest option, up to a maximum width. Where options are too long they should be truncated with a tooltip displaying the full text shown on hover.
...
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 | Enter |
|---|---|---|
Regular |
|  |
Hover |
|   | |
Active |
 |   |
Disabled |
|  |
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.
...
...