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.

Structure

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

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

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.

Button Form Cell

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

Size Variations

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

A small button is a 36px 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.

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.