UI Components Basic Components Buttons

Intro

Buttons allow users to trigger an action or make a choice with a single tap. They come in two variations: a simple text button and a contained button that has a fill color for more emphasis.

Text button and contained button
Text button and contained button

Usage

Buttons communicate actions that users can take. They are typically used in, but not limited to, the following components:

Do
  • Place the buttons so that users can easily see/find them on the UI.
  • Use a clear and concise text label on the button.
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 2 different variations of buttons: text and contained buttons.

Text Buttons

Text buttons are used for less important actions which are typically located in dialogs and snackbars.

Text Label

The text label is the most important element on a button. It communicates the action that will take place when the user taps it.

 

Text button used in a snackbar
Text button used in a snackbar
Text button states
Text button states


Contained Buttons

Contained buttons use a fill color and a shadow, therefore they have a higher emphasis.

  • It can also be set to the container’s relative position to the responsive grid layout.

 

Contained button on mobile (left) and tablet (right)
Contained button on mobile (left) and tablet (right)
Contained button in footer
Contained button in 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 (top) and text button with icon (bottom)
Text button (top) and text button with icon (bottom)
Specifications of text button
Specifications of text button


Contained Button

Contained button (top) and contained button with icon (bottom)
Contained button (top) and contained button with icon (bottom)
Specifications of contained button
Specifications of contained button


Resources

SAP Fiori for iOS: Buttons

SAP Fiori for Web: Button

Material Design: Buttons