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-purple">
  <i class="bi bi-heart-fill"></i>
</button>

Disabled

html

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

Ripple effect

Ripple effect requires Javascript. Click to view Javascript.

Learn more about Ripple.

html

<button type="button" class="btn btn-fab btn-purple">
  <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

html

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

Leaf FAB inverted

html

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

Mini FAB

html

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

Extended Fab / Rounded Button

html

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

CONTENTS