Selected button

Selected Button component display styled radio or checkbox element like a button dedicated for single or multiple choice.

Quick demo

Preview of the selected button component.

Go on interactive demo for look this component in action!

Usage

Styles

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

JavaScript

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

let amount = new BDCSelectedButton(document.querySelector('.bdc-selected-button'));

HTML structure

html
<label class="bdc-selected-button">
    <input class="bdc-selected-button__input" type="radio">

    <div class="bdc-selected-button__control">
        <span class="bdc-selected-button__label">$60</span>
    </div>
</label>

Variants

Checkbox

Use checkbox type for multiple choice.

html
<label class="bdc-selected-button">
    <input class="bdc-selected-button__input" type="checkbox">

    <div class="bdc-selected-button__control">
        <span class="bdc-selected-button__label">$60</span>
    </div>
</label>

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

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

.foo-selected-button {
    @include selected-button.unselected-colors(#0971b3);
}

See Sass mixins section for more options.

Style customization

CSS classes

CSS ClassDescription
bdc-selected-buttonMandatory.
bdc-selected-button--focusedStyle selected button at focused status.
bdc-selected-button--disabledStyle selected button at disabled status.
bdc-selected-button__inputIndicates the native input container.
bdc-selected-button__controlIndicates the native control container.
bdc-selected-button__labelIndicates the label container.

Sass mixins

Custom your own progress bar easily with the public Sass mixins.

MixinDescription
unselected-colors($fill-color, $stroke-color, $ink-color)Set the colors on the button when is unselected.
selected-colors($fill-color, $stroke-color, $ink-color)Set the colors on the button when is selected.
shape-radius($radius)Set the radius on the button.
"normal" (default), "filled", "shaped", "sharped" or custom radius.
density($scale)Set the density on the button.
0 (default) or -1.

JavaScript API

Getters & Setters

Public accessors from BDCSelectedButton class.

AccessorTypeDescription
valuestringMethod for "get" & "set" the value.
checkedbooleanMethod for "get" & "set" the checked status.
validbooleanMethod for "get" & "set" the valid status.
disabledbooleanMethod for "get" & "set" the disabled status.
Menu