Updated: July 17, 2024

Split Button

ui5-split-button | v1.0

Intro

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

Do

Use the split button:

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

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.
Anatomy of a split button
Anatomy of a split button

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

Implementation