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