https://www.sap.com/design-system/live-examples/Split_Button/SplitButton_LE_Enabled.html

Split buttons – live examples

https://www.sap.com/design-system/live-examples/Split_Button/SplitButton_LE_SemanticEnabled.html

Split buttons with semantics – live examples

https://www.sap.com/design-system/live-examples/Split_Button/SplitButton_LE_DisabledMix.html

Disabled split buttons

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.

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

Three split button variants are available to indicate the default action:

• Text only
• Icon only
• Text and icon

https://www.sap.com/design-system/live-examples/Split_Button/SplitButton_LE_VisualVariants.html

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

https://www.sap.com/design-system/live-examples/Split_Button/SplitButton_LE_PrioritizationVariants.html

Split button variants for prioritization – live examples

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

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.

https://www.sap.com/design-system/live-examples/Split_Button/SplitButton_LE_BehaviourAndInteraction.html

Split button behavior – live examples