Description
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
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.
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.
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 | Enter | |
|---|---|---|
Regular | |  |
Hover |   |   |
Active |   |   |
Disabled |  |  |
Focused |   |   |
Focused, Hover |   |   |
Focused, Active |   |   |
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:
as a form element.
for navigation → use Links.
when there are a lot of related actions (more than 5 or 6) → consider using an Action Menu.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Keyboard | Description |
Tab | Navigates to the next component. |
Shift + Tab | Navigates to the previous component. |
Space | Opens the menu. For the Action menu’s focus management see https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/918917536/Action+Menus#Focus-management. |
Enter | Applies the current action. |
Esc | N/A |
Arrows | Up/Down - Opens the menu. |
Design
Zeplin link | Screen thumbnail |
|---|---|
 | |
 |