The split button allows users to trigger different actions via two interactive areas: a default action on the left and a menu with additional actions on the right.
Split buttons – live examples
Split buttons with semantics – live examples
Disabled split buttons
When to Use
- Background: Different background colors visualize the state of the button.
- Text / Icon: Describes or visualizes the action that is triggered by the left interactive area.
- Separator: Indicates that the two areas result in different actions.
- Arrow: Opens the menu.
Anatomy of a split button
Three split button variants are available to indicate the default action:
- Text only
- Icon only
- Text and icon
Split button variants to visualize actions – live examples
(from top to bottom: text only, icon only, text and icon)
The split button also visualizes the priority. Three variants are available:
- Secondary (= standard)