Updated: June 29, 2022
Version 0.7
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
Variations
There are three different variations of buttons: text, tonal, and contained buttons.
Specifications
Placement

Button placement left (top) and right side (bottom)

Specifications of button placement
Text Button

Text button (right), text button with a leading icon (center), and text button with a trailing icon (right)

Specifications of text button
Tonal Button

Tonal button (right), tonal button with a leading icon (center), and tonal button with a trailing icon (right)

Specifications of tonal button
Contained Button

Tonal button (right), tonal button with a leading icon (center), and tonal button with a trailing icon (right)
