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
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
Do
  • Buttons should be easy to find within the UI.
  • A button’s action should be clear.
Don't
  • 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 used in a section footer
Text button states
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 buttons used in a card and table preview
Tonal button states
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
Contained button in the footer
Contained button states
Contained button states






Resources

SAP Fiori for iOS: Buttons

SAP Fiori for Web: Button

Material Design: Buttons