There are three sizes of floating action buttons: FAB, small FAB, and large FAB.

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/fab/style.css');

Usage

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

<button class="fab"></button>

Variants

Default

Default fab styling.

<button class="fab">
  <i class="material-icons">add</i>
</button>

Small

Small fab styling.

<button class="fab small">
  <i class="material-icons">add</i>
</button>

Large

Large fab styling.

<button class="fab large">
  <i class="material-icons">add</i>
</button>

Extended

Extended fab styling.

<button class="fab extended">Extended</button>

Icon (Optional)

Add an icon to the extended fab.

<button class="fab extended">
  <i class="material-icons">edit</i>
  <label>Extended</label>
</button>

Surface

Surface fab styling.

<button class="fab surface">
  <i class="material-icons">add</i>
</button>

Secondary

Secondary fab styling.

<button class="fab secondary">
  <i class="material-icons">add</i>
</button>

Tertiary

Tertiary fab styling.

<button class="fab tertiary">
  <i class="material-icons">add</i>
</button>

Design Tokens

Resources

• ARIA Resources
• MDN
• Material Design