Updated: May 23, 2018

Buttons

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.

Usage

Dos

  • To communicate important action(s).
  • To navigate to another screen, trigger a modal, or initiate an action.

Don’ts

  • To see additional information in a cell. Use a chevron or a detail disclosure button instead.
  • Place raised buttons in the toolbar or navigation bar. Use a flat button instead.

Types

Raised button

The raised button is a rectangular target that indicates interactivity, adds color, and is easily tappable. Use raised buttons as a call to action that is horizontally centered on screen or placed within a control that affords enough space.

Flat button

The flat button is a target where the tinted text is the only visual cue that indicates interactivity. Flat buttons are used to help reduce distraction from content and are usually placed in the navigation bar and toolbar.

Structure

Raised buttons consists of a center-aligned label contained within a filled or outlined rectangular background. There are two styles: Regular and Emphasized. Flat buttons appear only as text labels.

Styles

Raised buttons have three different variations:

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

Toggle Button

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

  • Bookmark / Unbookmark
  • Follow / Unfollow
  • Favorite / Unfavorite
  • Hold / Release

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.

Sizes

Different sizes allow for raised buttons to be used on a range of different use cases.

A small button is a 36px tall button that is placed in controls such as object cell or map detail panel.

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.

Behavior & Interaction

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

Active State: Indicates a button’s interactivity. 

Tap State: Communicates that the button has been pressed.

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