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