Button

Button component allows to use the button element.

Quick demo

Preview of the button component.

Go on interactive demo for look this component in action!

Usage

Styles

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

JavaScript

javascript
import { BDCButton } from '@iraiser/biscuit-design-components/components/button';

let button = new BDCButton(document.querySelector('.bdc-button'));

HTML structure

html
<button class="bdc-button">
    <span class="bdc-button__label">Button</span>

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

Variants

Subtext

Use button with a subtext.

html
<button class="bdc-button bdc-button--subtext">
    <span class="bdc-button__label">Button</span>

    <span class="bdc-button__subtext">Subtext</span>

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

Leading and trailing icons

The leading and trailing icons can add a new context on button. You can add leading, trailing or both.

Leading icon

Add on button the leading icon.

html
<button class="bdc-button bdc-button--leading-icon">
    <i class="bdc-button__icon fa-star fas"></i>

    <span class="bdc-button__label">Button</span>

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

Trailing icon

Add on button the trailing icon.

html
<button class="bdc-button bdc-button--trailing-icon">
    <span class="bdc-button__label">Button</span>

    <i class="bdc-button__icon fa-star fas"></i>

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

Both icons

Add on button the leading and trailing icons.

html
<button class="bdc-button bdc-button--leading-icon bdc-button--trailing-icon">
    <i class="bdc-button__icon fa-star fas"></i>

    <span class="bdc-button__label">Button</span>

    <i class="bdc-button__icon fa-star fas"></i>

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

Outlined

html
<button class="bdc-button bdc-button--outlined">
    <span class="bdc-button__label">Button</span>

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

Texted

html
<button class="bdc-button bdc-button--text">
    <span class="bdc-button__label">Button</span>

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

Loading

html
<button class="bdc-button bdc-button--loading">
    <span class="bdc-button__label">Button</span>

    <div class="bdc-button__raccoon"></div>
    
    <div class="bdc-button__spinner bdc-spinner"></div>
</button>

Other variations

Use button like a regular link.

html
<a class="bdc-button" href="#">
    <span class="bdc-button__label">Button</span>

    <div class="bdc-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/button";

.foo-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/button";

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

See Sass mixins section for more options.

Style customization

CSS classes

CSS ClassDescription
bdc-buttonMandatory.
bdc-button--outlinedStyle button at outlined.
bdc-button--textStyle button at text.
bdc-button--subtextStyle button at subtext.
bdc-button--leading-iconStyle button at leading icon.
bdc-button--trailing-iconStyle button at trailing icon.
bdc-button--loadingStyle button at loading.
bdc-button--disabledStyle button at disabled.
bdc-button__labelIndicates the label container.
bdc-button__subtextIndicates the subtext container.
bdc-button__iconIndicates the icon container.
bdc-button__raccoonIndicates the raccoon container.

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.
shape-radius($radius)Set the radius on button.
"normal" (default), "filled", "shaped", "sharped" or custom radius.
density($scale)Set the density on button.
0 (default), -1 or -2.

JavaScript API

Getters & Setters

Public accessors from BDCButton class.

AccessorTypeDescription
loadingbooleanMethod for get & set the loading status.
disabledbooleanMethod for get & set the disabled status.
Menu