Split button
A split button is a button with a main action and related secondary actions contained in a drop-down.
- Overview
- Specs
- Guidelines
Component
A split button is a composition of the button component with a drop-down . It contains a set of grouped actions that help to reduce the amount of space taken up if each action was on an isolated button. It also makes it easier for the user to find the action they want as it has less visual noise and is grouped logically.
It can contain a visible main action and, by clicking on the drop-down section, it shows related secondary actions.
A: Primary variation
B: Secondary variation
1: Left icon
2: Label
3: Drop-down section
Used for:
Parallel actions
To let users select from multiple parallel actions. Actions are parallel when each one represents a path forward for the user and none cancels the action;
Reduce visual complexity
To reduce visual complexity when there are multiple actions a user can perform;
Workflow streamlining
In workflows where users frequently perform a primary action followed by secondary actions, split buttons streamline the process by presenting all relevant options in one location;
Consistent action grouping
Split buttons can help maintain consistency in action grouping throughout an interface. When related actions are logically grouped together, for example with having “save & new” as an action related to “save”;
Quick access
When certain actions are frequently used and need to be easily accessible, the primary button of a split button can serve as a shortcut to the most common action.
Don’t use for:
Frequently used actions
If the functionality provided by split buttons overlaps with other interface elements or controls, such as drop-down menus or traditional buttons, consider using button groups.
Complexity overload
In interfaces where users are already confronted with a high level of complexity or cognitive load, adding split buttons may further overwhelm users;
Lack of clarity
If the distinction between the primary action and secondary actions within the split button is unclear or ambiguous, users may struggle to understand;
Inconsistent use
In interfaces where split buttons are inconsistently used or appear sporadically without a clear rationale, users may find it challenging to predict when and where split buttons will appear.
Demo
Access the Figma file and inspect element using Dev Mode.
Last Update
- Updated dropdown menu;
- Updated state color variables;
- Updated label typography;
