Badge

According to color palette - badge or label comes with different variation.

Default Primary Secondary Tertiary Info Success Danger Link Dark Black

<span class="badge">Default</span>


<span class="badge badge-primary">Primary</span>


<span class="badge badge-secondary">Secondary</span>


<span class="badge badge-tertiary">Tertiary</span>


<span class="badge badge-info">Info</span>


<span class="badge badge-success">Success</span>


<span class="badge badge-danger">Danger</span>


<span class="badge badge-link">Link</span>


<span class="badge badge-dark">Dark</span>


<span class="badge badge-black">Black</span>

SASS

Reference from _badge.scss

$badge-radius: $global-border-radius !default;

:root {
    --r-badge-radius: #{$badge-radius};
    --r-badge-background: var(--r-color-white-darken-5);
    --r-badge-color: var(--r-color-white-darken-50);    
}