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

Contained Button