Buttons allow users to trigger an action or make a choice with a single tap.
- Buttons should be easy to find within the UI.
- A button’s action should be clear.
- 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.
There are 2 different types of buttons: text and 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.
|Disabled state text||#800A6ED1 or #0A6ED1 with 50% opacity|
|Pressed state text||#E0EEF6|
|Disabled state background||#800A6ED1 or #0A6ED1 with 50% opacity|
|Disabled state text||#80FFFFFF or #FFFFFF with 50% opacity|
|Pressed state background||#3185D8|