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 floating-action-button--surface">
  <span class="material-icons">edit</span>
</button>
<button type="button" class="floating-action-button floating-action-button--secondary">
  <span class="material-icons">edit</span>
</button>
<button type="button" class="floating-action-button floating-action-button--tertiary">
  <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--lowered">
  <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>