Updated: February 17, 2022
Version 1.0
Buttons
Intro
Usage
Buttons communicate actions that users can take. They are typically used in, but not limited to, the following components:
- Dialogs
- Form cells
- Snackbar
- Cards
- App bars
Variations
There are 2 different variations of buttons: text and contained buttons.
Contained Buttons
Contained buttons use a fill color and a shadow, therefore they have a higher emphasis.
- It can also be set to the container’s relative position to the responsive grid layout.

Contained button on mobile (left) and tablet (right)
Specifications
Placement

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

Specifications of button placement
Text Button

Text button (top) and text button with icon (bottom)

Specifications of text button
Contained Button

Contained button (top) and contained button with icon (bottom)
