Buttons
Intro
Buttons allow users to trigger an action or make a choice with a single tap. They come in three variations: text button, tonal, and contained button.
Text button and contained button
Usage
Buttons communicate actions that users can take. They are typically used in the following components:
- Dialogs
- Form cells
- Snackbar
- Cards
- App bars
- Buttons should be easy to find within the UI.
- A button’s action should be clear.
- Do not wrap text inside a button, as a text label should remain on a single line.
- Do not stack buttons above each other. Place them side by side.
- Avoid text labels that are too long.
Variations
Text Buttons
Text buttons are used for less important actions in the UI. Use text buttons for secondary actions that supplement a user’s workflow.
Text button used in a section footer
Text button states
Tonal Buttons
Tonal buttons are used to add more emphasis than text buttons without the visual prominence of a contained button. Use tonal buttons to represent actions that are significant in a user’s workflow.
Tonal buttons used in a card and table preview
Tonal button states
Contained Buttons
Contained buttons have a saturated background color making them the buttons with the highest prominence. Use contained buttons for the most important actions in a user’s workflow.
Contained button in the footer
Your feedback has been sent to the SAP Fiori design team.