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 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

There are three different variations of buttons: text, tonal, and contained buttons.

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

Specifications

Placement

Button placement left (top) and right side (bottom)
Button placement left (top) and right side (bottom)
Specifications of button placement
Specifications of button placement


Text Button

Text button (right), text button with a leading icon (center), and text button with a trailing icon (right)
Text button (right), text button with a leading icon (center), and text button with a trailing icon (right)
Specifications of text button
Specifications of text button


Tonal Button

Tonal button (right), tonal button with a leading icon (center), and tonal button with a trailing icon (right)
Tonal button (right), tonal button with a leading icon (center), and tonal button with a trailing icon (right)
Specifications of tonal button
Specifications of tonal button


Contained Button

Tonal button (right), tonal button with a leading icon (center), and tonal button with a trailing icon (right)
Tonal button (right), tonal button with a leading icon (center), and tonal button with a trailing icon (right)
Specifications of contained button
Specifications of contained button

Resources

SAP Fiori for iOS: Buttons

SAP Fiori for Web: Button

Material Design: Buttons