Updated: September 28, 2017

Buttons

Intro

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

Usage

Do’s

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

Dont’s

  • 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

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

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

Button consists of a center-aligned label contained within a filled or outlined rectangular background.

Styles

Raised buttons come in two different styles:

Single Button

Use single buttons on a sign in screen, landing screen, a confirmation screen, or error screen that has a clear single primary action. The following are common actions that may be used on single button:

  • Activate
  • Confirm
  • Continue
  • Create
  • Sign in
  • Scan

Side by Side Buttons

Use side by side buttons as a secondary option, to make changes, or to exit before committing to an action. The following are common actions that may be used on Side by Side buttons:

  • Reject / Approve
  • Decline / Accept
  • Cancel / Ok
  • Cancel / Save
  • Not Now / Enable
  • Edit / Confirm

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 buttons interaction.

Regular State: Indicates a button’s interactivity.

Active State: Communicates that the button has been pressed.

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

Button Behavior
Button Behavior