Button

Button

Elevated

<button type="button" class="button button--elevated">
  <div class="button__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="button__label">
    Elevated
  </div>
</button>
<button type="button" class="button button--elevated" disabled>
  Disabled
</button>

Filled

<button type="button" class="button button--filled">
  <div class="button__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="button__label">
    Filled
  </div>
</button>
<button type="button" class="button button--filled" disabled>
  Disabled
</button>

Filled tonal

<button type="button" class="button button--filled-tonal">
  <div class="button__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="button__label">
    Filled
  </div>
</button>
<button type="button" class="button button--filled-tonal" disabled>
  Disabled
</button>

Outlined

<button type="button" class="button button--outlined">
  <div class="button__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="button__label">
    Outlined
  </div>
</button>
<button type="button" class="button button--outlined button--surface">
  Outlined surface
</button>
<button type="button" class="button button--outlined" disabled>
  Disabled
</button>

Text

<button type="button" class="button button--text">
  <div class="button__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="button__label">
    Text
  </div>
</button>
<button type="button" class="button button--text">
  Text button
</button>
<button type="button" class="button button--text" disabled>
  Disabled
</button>

Icon

<button type="button" class="button button--icon">
  <span class="material-icons">bookmark_border</span>
</button>
<button type="button" class="button button--icon" disabled>
  <span class="material-icons">bookmark_border</span>
</button>

Floating action

Color

<button type="button" class="button button--floating-action">
  <span class="material-icons">edit</span>
</button>
<button type="button" class="button button--floating-action button--surface">
  <span class="material-icons">edit</span>
</button>
<button type="button" class="button button--floating-action button--secondary">
  <span class="material-icons">edit</span>
</button>
<button type="button" class="button button--floating-action button--tertiary">
  <span class="material-icons">edit</span>
</button>
<button type="button" class="button button--floating-action" disabled>
  <span class="material-icons">edit</span>
</button>

Size

<button type="button" class="button button--floating-action">
  <span class="material-icons">edit</span>
</button>
<button type="button" class="button button--floating-action button--small">
  <span class="material-icons">edit</span>
</button>
<button type="button" class="button button--floating-action button--large">
  <span class="material-icons">edit</span>
</button>

Elevation

<button type="button" class="button button--floating-action">
  <span class="material-icons">edit</span>
</button>
<button type="button" class="button button--floating-action button--lowered">
  <span class="material-icons">edit</span>
</button>

Extended

<button type="button" class="button button--floating-action">
  <div class="button__icon">
    <span class="material-icons">edit</span>
  </div>
  <div class="button__label">
    Compose
  </div>
</button>
<button type="button" class="button button--floating-action">
  <div class="button__label">
    Compose
  </div>
</button>