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;
Related
Action Bar
States
Primary
Enabled
.enabled {
background-color: var(--Theme-100);
color: var(--grey-1);
}Expanded
.expanded {
left {
background-color: var(--Theme-100);
color: var(--grey-1);
};
right {
background-color: var(--Theme-Highlight);
color: var(--grey-1);
};
dropdown{
background-color: var(--grey-1);
color: var(--grey-7);
};
}Secondary
Enabled
.enabled {
border-color: var(--grey-5);
color: var(--grey-7);
}Expanded
.expanded {
button{
background-color: var(--grey-4);
border-color: var(--grey-5);
color: var(--grey-8);
};
dropdown{
background-color: var(--grey-1);
color: var(--grey-7);
};
}Size
Small
.small {
padding: var(--spacing-8) var(--spacing-4) var(--spacing-8) var(--spacing-4);
gap: var(--spacing-4);
border-radius: var(--x-small-radius);
icon: icon: 20px;
label: var(--Button-small);
}Regular
.regular {
padding: var(--spacing-12) var(--spacing-8) var(--spacing-12) var(--spacing-8);
gap: var(--spacing-4);
border-radius: var(--x-small-radius);
icon: icon: 20px;
label: var(--Button-regular);
}Large
.large {
padding: var(--spacing-16) var(--spacing-8) var(--spacing-16) var(--spacing-8);
gap: var(--spacing-8);
border-radius: var(--x-small-radius);
icon: icon: 24px;
label: var(--Button-large);
}Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
Behavior
Main Action
It only happens in the primary variation. The split button is divided into two clickable areas, one that activates the main action and one that activates the drop-down.
Trimming
Action labels should be short and concise. If there isn’t enough space to display the entire name of the action, the label suffers from trimming without the possibility of a line break.
The ellipsis can also be applied to actions that require more configuration or specification.
Dos & Dont’s
Apply a split button to group similar actions;
The position of the split buttons follows the hierarchical order specified on the buttons;
If there is no main action, use the secondary variation;
Case Studies
Building a new Seamless User Experience
Discover the exciting features
