Commentary

A FAB performs the primary, or most common, action on a screen and helps people take this action. This is also a button element. The button has two sizes that can be changed with a modifier. The FAB can be a rounded rectangle (default) or round (with modifier .is-rounded). The content of the FAB is typically a single common icon.

For a more detailed usage commentary, see FAB overview

Usage

Classes:
button takes over button HTML tag
Colour options: .fab, .fab-primary, .fab-secondary, .fab-complement
Icon options: Uses standard icons of the form <span class="icon-bg-bell"></span>.
.is-rectangle creates rounded corners of a rectangle instead of a circle button.
Button size options: .is-large
Button positions: .is-top-left, .is-top-right, .is-bottom-left, .is-bottom-right
Dependencies:
File: buttons.css
Variables: --base-rem, --complement-dark, --complement-text-invert-dark, --grey-dark, --primary-dark, --primary-text-invert, --radius-elem, --secondary, --secondary-text-invert, --shadow-raw
Layer: elements

Examples

Floating Action Buttons

Combined HTML Code Example


                <button type="button" class="fab" aria-label="Default">✓</button>

                <button type="button" class="fab-primary  is-large " aria-label="Primary">
                    <span class="icon-bg-profile"></span>
                </button>

                <button type="button" class="fab-secondary is-rounded" aria-label="Secondary">
                    <span class="icon-bg-link"></span>
                </button>

                <button type="button" class="fab-complement is-large is-rounded" aria-label="Complement">+</button>

                <button type="button" class="fab-complement is-top-right" aria-label="Complement">?</button>