Badge

Badge component.

Quick demo

Preview of the badge component.

Go on interactive demo for look this component in action!

Usage

Styles

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

HTML structure

html
<div class="bdc-badge">
    <i class="bdc-badge__icon fa-star fas fa-fw"></i>
</div>

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/badge";

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

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

See Sass mixins section for more options.

Style customization

CSS classes

CSS ClassDescription
bdc-badgeMandatory.
bdc-badge__iconIndicates the icon container.

Sass mixins

Custom your own badge easily with the public Sass mixins.

MixinDescription
fill-color($color)Set the container fill color.
ink-color($color)Set the ink of icon color.
Menu