Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

• Dialogs
• Modal windows
• Forms
• Cards
• Toolbars

Buttons are just one option for representing actions in a product and shouldn’t be overused. Too many buttons on a screen disrupts the visual hierarchy.

Preview

Installation

To import just the component styles, copy the following into your project’s styles.css file:

/* Core Styles */
@import url('https://kherrick.github.io/material-design-lite/css/core.css');
/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
/* Component Styles */
@import url('https://kherrick.github.io/material-design-lite/css/components/button/style.css');

Usage

Start with a button or div element and add the button class name:

<button class="button">Default</button>

The button class name is implicit when using the button element.

Icon (Optional)

To add a icon to a button add a i element with the material-icons class name:

<button>
  <i class="material-icons">favorite</i>
  <label>Button</label>
</button>

Variants

Default

Default button styling.

<button>Default</button>

Elevated

Elevated buttons are essentially filled tonal buttons with a shadow. To prevent shadow creep, only use them when absolutely necessary, such as when the button requires visual separation from a patterned background.

<button class="elevated">Elevated</button>

Filled

Filled buttons have the most visual impact after the FAB, and should be used for important, final actions that complete a flow, like Save, Join now, or Confirm.

<button class="filled">Filled</button>

Filled Tonal

A filled tonal button is an alternative middle ground between filled and outlined buttons. They’re useful in contexts where a lower-priority button requires slightly more emphasis than an outline would give, such as “Next” in an onboarding flow. Tonal buttons use the secondary color mapping.

<button class="filled-tonal">Filled Tonal</button>

Outlined

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.

Outlined buttons pair well with filled buttons to indicate an alternative, secondary action.

<button class="outlined">Outlined</button>

Text

Text buttons are used for the lowest priority actions, especially when presenting multiple options.

Text buttons can be placed on a variety of backgrounds. Until the button is interacted with, its container isn’t visible.

<button class="text">Text</button>

Design Tokens

Resources

• ARIA Resources
• MDN
• Material Design