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 round or a rounded rectangle. 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 and decoration options: .fab, .fab-primary, .fab-secondary, .fab-complement
.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: --bg-main,--bg-element, --border-main-darker, --grey-dark, --complement, --complement-dark, --complement-text-invert, --primary, --primary-dark, --primary-text-invert, --secondary, --secondary-dark, --secondary-text-invert, --radius-elem, --size-4, --size-5, --size-6, --size-7, --weight-semibold
Layer: elements

Examples

Floating Action Buttons

Combined HTML Code Example


                <button type="button" class="fab"  aria-label="Floating Action Button">
                    Primary
                </button>

                <button type="button" class="fab-primary" aria-label="Primary FAB">
                    Primary
                </button>

                <button type="button" class="fab-secondary" aria-label="Secondary FAB">
                    Primary
                </button>

                 <button type="button" class="fab-complement" aria-label="Complement FAB">
                    Primary
                </button>