Buttons are used to perform explicit actions. Buttons may be text or images.


  • Buttons have two components: a visual target and a hit target. The visual target is the button the user sees on the screen. The hit target is an invisible area that responds to the tap. To minimize tapping errors, the hit target is typically larger than the visual target.
  • Buttons have two states: normal and pressed.
  • Disabled buttons are buttons that do not respond to a tap. Disabled buttons are dimmed.

In a dialog when multiple action buttons are displayed, the primary button uses a highlight color to indicate it is the primary option. Other options are displayed using a neutral color. The primary button is always on the right hand side. The negative button, (“Cancel” or “Exit” for example) is always displayed on the left hand side.

A warning or destructive action button uses a red highlight color to indicate that it needs more attention before tapping it.

Icon-based action buttons (A) do not have primary or warning color indication.

A value selector button with a triangle in the bottom right corner (B) triggers a value selector when tapped.

Implementation guides

Document Tags and Contributors

 Contributors to this page: chrisdavidmills
 Last updated by: chrisdavidmills,