Floating action button

Floating action

Color

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

Size

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

Elevation

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

Extended

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