Updated: October 17, 2022

Buttons

FUIButton

Intro

A button communicates the action that it is going to initiate. Users can tap a button to begin a process or workflow, or to trigger an action.

Examples of a standard button (left), toggle buttons (middle) and a directions button (right)
Examples of a standard button (left), toggle buttons (middle) and a directions button (right)

Anatomy

A button can consist of a label and a symbol on a filled or unfilled rectangular background.

Symbol buttons, label buttons, and label buttons with a symbol
Symbol buttons, label buttons, and label buttons with a symbol

Behavior and Interaction

Button States

Buttons have several states that provide feedback on a button’s interaction:

A: Active State: Indicates a button’s interactivity. 

B: Tap State: Communicates that the button has been pressed.

C: Disabled State: Discloses that the action is available but has been disabled.

D: Keyboard Focus State: Indicates that the button is focused when navigating with a keyboard

E: VoiceOver Focus State: Indicates that the button is a focus target during VoiceOver interaction

Active, tapped, disabled, keyboard-focused, VoiceOver-focused buttons
Active, tapped, disabled, keyboard-focused, VoiceOver-focused buttons

Toggle Button

The toggle buttons change between primary and secondary buttons. The buttons are used when there is a direct action to take on an object that does not require navigation, Such as:

  • Follow / Unfollow
  • Select / Selected
  • Bookmark / Unbookmark
  • Favorite / Unfavorite
  • Hold / Release
Toggle button behavior examples of
Toggle button behavior examples of "Follow" and "Unfollow", and "Select" and "Unselected"

Variations

There are several different types of buttons and each is designed for a specific kind of action. Buttons have two basic visual styles, regular and emphasized.

Button Type

Buttons now have three main types based on the priority of each action.

  1. Primary Button
  2. Secondary Button
  3. Tertiary Button
Primary, Secondary, and Tertiary buttons with symbols and labels
Primary, Secondary, and Tertiary buttons with symbols and labels

Primary Button

Use the primary button on a sign-in screen, landing screen, confirmation screen, error screen, or on a screen that has one explicit primary action. The following are examples applicable to primary buttons:

  • Activate
  • Confirm
  • Continue
  • Create
  • Sign in
  • Scan
Primary buttons in scan and sign-in use cases
Primary buttons in scan and sign-in use cases

Secondary Button

Use the secondary button when actions are optional or have lower priority.

A card showing
A card showing "Dismiss" button in the Secondary type

Tertiary Button

Use the tertiary button when the action has the lowest priority, or they are parts of navigation. Tertiary buttons usually contain either only text content or only symbol.

An example of a navigation bar with tertiary symbol buttons
An example of a navigation bar with tertiary symbol buttons

Button Style

Buttons also have additional two styles:

  1. Tint Button
  2. Negative Button
Tint and negative buttons
Tint and negative buttons

Tint Button

The tint button style can emphasize available actions and encourage users to interact with them. The Primary button’s default style is not different from the tint one.

Negative Button

The negative button style indicates destructive actions and warns users to take extra precautions when interacting with the buttons.

A vertical button stack showing different uses of each button style
A vertical button stack showing different uses of each button style

Size Variations

Buttons are by default dynamic in width and are dependent on the container they are placed in, but they can also be set to a fixed width and height.

A touch area of a button should not be less than 44pt.

Flexible, fixed width, and Fixed size buttons from top to bottom
Flexible, fixed width, and Fixed size buttons from top to bottom

Specification

Design specification for a button
Design specification for a button

Resources

Development: FUIButton

SAP Fiori for Android: Buttons