Floating button

Floating Button component allows to use the button or link elements styled like floating.

Quick demo

Preview of the floating button component.

Go on interactive demo for look this component in action!

Usage

Styles

sass
@use "~@iraiser/biscuit-design-components/components/floating-button/styles";

HTML structure

html
<button class="bdc-floating-button">
    <i class="bdc-floating-button__icon fa-star fas fa-fw"></i>

    <div class="bdc-floating-button__raccoon"></div>
</button>

Variants

Outlined

html
<button class="bdc-floating-button bdc-floating-button--outlined">
    <i class="bdc-floating-button__icon fa-star fas fa-fw"></i>

    <div class="bdc-floating-button__raccoon"></div>
</button>

Other variations

Use floating button like a regular link.

html
<a class="bdc-floating-button" href="#">
    <i class="bdc-floating-button__icon fa-star fas fa-fw"></i>

    <div class="bdc-floating-button__raccoon"></div>
</a>

Theming

See the "Theming" section on theme documentation for more customization options.

Theming with CSS custom properties

Set custom styles on specific element in component:

sass
@use "~@iraiser/biscuit-design-components/components/floating-button";

.foo-floating-button {
    --bdc-theme-primary: #0971b3;
    --bdc-theme-on-primary: #fff;
}

Theming with Sass mixins

Set custom styles on specific element in component:

sass
@use "~@iraiser/biscuit-design-components/components/floating-button";

.foo-floating-button {
    @include floating-button.fill-color(#0971b3);
}

See Sass mixins section for more options.

Style customization

CSS classes

CSS ClassDescription
bdc-floating-buttonMandatory.
bdc-floating-button--outlinedStyle the button at outlined.
bdc-floating-button--disabledStyle the button at disabled.
bdc-floating-button__iconIndicates the icon container.
bdc-floating-button__raccoonIndicates the raccoon.

Sass mixins

Custom your own button easily with the public Sass mixins.

MixinDescription
fill-color($color)Set the container fill color when button is enable.
disabled-fill-color($color)Set the container fill color when button is disabled.
ink-color($color)Set the ink color when button is enable.
disabled-ink-color($color)Set the ink color when button is disabled.
outlined-color($color)Set the border color when button is enable.
disabled-outlined-color($color)Set the border color on when button is disabled.
density($scale)Set the density on the button.
0 (default), -1 or -2
Menu