- To communicate important action(s).
- To navigate to another screen, trigger a modal, or initiate an action.
- 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.
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.
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.
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.