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>