Buttons

Intro

Buttons allow users to trigger an action or make a choice with a single tap. They come in three variations: text button, tonal, and contained button.

Text button and contained button

Usage

Buttons communicate actions that users can take. They are typically used in the following components:

Dialogs
Form cells
Snackbar
Cards
App bars

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

Don't

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.

Variations

There are three different variations of buttons: text, tonal, and contained buttons.

Text Buttons

Text buttons are used for less important actions in the UI. Use text buttons for secondary actions that supplement a user’s workflow.

Text button used in a section footer

Text button states

Tonal Buttons

Tonal buttons are used to add more emphasis than text buttons without the visual prominence of a contained button. Use tonal buttons to represent actions that are significant in a user’s workflow.

Tonal buttons used in a card and table preview

Tonal button states

Contained Buttons

Contained buttons have a saturated background color making them the buttons with the highest prominence. Use contained buttons for the most important actions in a user’s workflow.