Floating Action Buttons (FAB)

The FAB represents the most important action on a screen. It puts key actions within reach.

html

<button type="button" class="btn btn-fab btn-primary">
  <i class="bi bi-heart-fill"></i>
</button>

Elevated

Add .elevated-[1 to 10] to create Elevated buttons.

CODE

html

<button type="button" class="btn btn-fab btn-tertiary elevated-1">
  <i class="bi bi-heart-fill"></i>
</button>

html

<button type="button" class="btn btn-fab btn-tertiary elevated-10">
  <i class="bi bi-heart-fill"></i>
</button>

Disabled

CODE

html

<button type="button" class="btn btn-fab btn-primary" disabled>
  <i class="bi bi-heart-fill"></i>
</button>

Ripple effect

Ripple effect requires Javascript. Click to view Javascript.

Learn more about Ripple.

CODE

html

<button type="button" class="btn btn-fab btn-primary">
  <i class="bi bi-heart-fill"></i>
  <span class="ripple-surface"></span>
</button>

Javascript for ripple

// Initialize Ripple
const rippleSurface = Array.prototype.slice.call(document.querySelectorAll('.ripple-surface'))
rippleSurface.map(s => {
  return new mdc.ripple.MDCRipple(s)
})

Leaf FAB

CODE

html

<button type="button" class="btn btn-fab leaf-fab btn-danger">
  <i class="bi bi-heart-fill"></i>
</button>

Leaf FAB inverted

CODE

html

<button type="button" class="btn btn-fab leaf-fab-inverted btn-danger">
  <i class="bi bi-heart-fill"></i>
</button>

Mini FAB

CODE

html

<button type="button" class="btn btn-fab mini-fab btn-success">
  <i class="bi bi-heart-fill"></i>
</button>

Extended Fab / Rounded Button

CODE

html

<button type="button" class="btn btn-success btn-lg rounded-pill">
  <i class="bi bi-heart-fill"></i> Like
</button>

Theme Builder

Personalize Material Style to reflect your product's brand identity.

CONTENTS