Intro
Buttons allow users to trigger an action and come in a variety of shapes and colors.
https://www.sap.com/design-system/live-examples/Button/Button_LE_Enabled.html
Buttons – live examples
https://www.sap.com/design-system/live-examples/Button/Button_LE_SemanticEnabled.html
Buttons with semantics – live examples
When to Use
Do
Use the button:
- To offer a single action, such as:
Create, Edit, Save, Delete, Approve, Reject, Add, Remove, Cancel
Don't
Don’t use the button:
- To switch between different states. Use the toggle button or the switch instead.
- To show a group of options. Use the split button or the segmented button instead.
Anatomy
- Background: Different background colors visualize the state of the button.
- Text / Icon: Describes or visualizes the action that is triggered by the button.
Anatomy of a button
Types
Three button variants are available to indicate the action:
- Text only
- Icon only
- Text and icon
https://www.sap.com/design-system/live-examples/Button/Button_LE_VisualVariants.html
Button variants to visualize actions – live examples
(from top to bottom: text only, icon only, text and icon)
The button also visualizes the priority of the action. Three variants are available:
- Primary
- Secondary (= standard)
- Tertiary
https://www.sap.com/design-system/live-examples/Button/Button_LE_PrioritizationVariants.html
Button variants for prioritization – live examples
(from top to bottom: primary, secondary, tertiary)