UI Components Buttons

Updated: January 25, 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 consists of a center-aligned label contained within a filled or outlined rectangular background.

Behavior and Interaction

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.

Active (left), tapped (middle) and disabled buttons (right)
Active (left), tapped (middle) and disabled buttons (right)

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.

Standard Button

Use the standard button on a sign-in screen, landing screen, confirmation screen, error screen, or on a screen that has one clear primary action. The following are common actions that may be used for the standard button:

  • Activate
  • Confirm
  • Continue
  • Create
  • Sign in
  • Scan
Regular button (top) and emphasized button (bottom)
Regular button (top) and emphasized button (bottom)

Toggle Button

Toggle buttons are used when there is a direct action to take on an object that does not require navigation, Such as:

  • Follow / Unfollow
  • Bookmark / Unbookmark
  • Favorite / Unfavorite
  • Hold / Release
Default unselected state (top) and selected state (bottom)
Default unselected state (top) and selected state (bottom)

Directions Button

Directions button: The directions button is used only when navigating to an address via a defined route. It can have either a single label, or primary and secondary labels. It will always be displayed as a raised button. Note that the text label styling is slightly different than the standard button.

Directions button default (top) and directions button with secondary information (bottom)
Directions button default (top) and directions button with secondary information (bottom)

Button Form Cell

Button Form Cell is for single action purpose related to a target view. Learn more about Button Form Cell.

Button form cell (top), semantic button form cell (middle) and centered button form cell (bottom)
Button form cell (top), semantic button form cell (middle) and centered button form cell (bottom)

Size Variations

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

A small button is a 44px tall button that is placed in controls such as object cell.

A large button is a 50px tall button that is placed in simple UIs such as login screens, confirmation screens, or any view with sufficient real-estate.

Small button (top) and large button (bottom)
Small button (top) and large button (bottom)

Specification

Design specification for small (left) and large buttons (right)
Design specification for small (left) and large buttons (right)

Resources

Development: FUIButton

SAP Fiori for Android: Buttons