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

Use the split button:

• To offer a group of actions when one option is used more often than the others.

Don’t use the split button:

• To switch between different states. Use the toggle button or the switch instead.
• For standalone actions with no additional options. Use the button instead.

Anatomy

1. Background: Different background colors visualize the state of the button.
2. Text / Icon: Describes or visualizes the action that is triggered by the left interactive area.
3. Separator: Indicates that the two areas result in different actions.
4. Arrow: Opens the menu.

Variants

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:

• Primary
• Secondary (= standard)
• Tertiary

Split button variants for prioritization – live examples

(from top to bottom: primary, secondary, tertiary)

Behavior and Interaction

The split button has two interactive areas:

• The left click-area triggers the default action.
• The right area (arrow) opens a menu with the additional actions. For more information, see Menu.

Split button behavior – live examples

Related Links