Updated: November 7, 2020
Version 0.2
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:
- Dialogs
- Form cells
- Snackbar
- Cards
- App bars
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.
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.

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 |