UI Components Basic Components Buttons

Intro

Buttons allow users to trigger an action or make a choice with a single tap.

Usage

Buttons communicate actions that users can take. They are typically used in places like:

Do’s

  • Buttons should be easy to find within the UI.
  • A button’s action should be clear.

Don’ts

  • Do not wrap text inside a button, as a text label should remain on a single line.
  • Do not stack buttons above each other. Place them side by side.
  • Avoid text labels that are too long. They need to be concise.

Types

There are 2 different types of buttons: text and contained buttons.

Text Buttons

Text buttons are used for less important actions. These less-emphasized actions are typically located in dialogs and snackbars.

Text Label

Text label is the most important element on a button. It communicates the action that will take place when the user taps it.

 

Text button used in a snackbar
Text button used in a snackbar
Text button states
Text button states


Contained Buttons

Contained buttons have high emphasis, as they use a fill color and shadow.

  • A contained button’s width is set to fit its text label plus 16dp left and right padding.
  • It can also be set to container’s relative position to the responsive grid layout.

 

Contained button in footer
Contained button in footer
Contained button states
Contained button states

Specs

Placement



Text Button



Contained Button



Text Button

Sample Element Alpha Hex
Text #0A6ED1
Disabled state text #800A6ED1 or #0A6ED1 with 50% opacity
Pressed state text #E0EEF6


Contained Button

Sample Element Alpha Hex
Background #0A6ED1
Text #FFFFFF
Icon #FFFFFF
Disabled state background #800A6ED1 or #0A6ED1 with 50% opacity
Disabled state text #80FFFFFF or #FFFFFF with 50% opacity
Pressed state background #3185D8