Floating action button

This button overlays the remaining page content. It sticks in a corner by scrolling the page.

Usage#

The floating action button is based on the default button component. It use .btn class for basic styling and, in this example, .btn-primary for primary color.

This dependency on the button means that the button component must also be included in SCSS.

Examples#

preview

<button class="btn btn-fab btn-primary">
    <svg class="icon icon-3" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
        <title>Placeholder</title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
        </use>
    </svg>
</button>

Change log#

4.4.0 - 2020-10-22#

Fixed#

  • SCSS: "Floating action button" | fix box shadow variable