Badges
Small count and labeling component.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                badge: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<span class="badge bg-primary">Badge</span>
NameDescription
.badgeBase class of the badge component
.badge.rounded-pillApplies rounded pill style to the badge
.badge.badge-dotApplies dot style to the badge
.badge.badge-dot.badge-dot-lgApplies large dot style to the badge
Customize variables at:/library/extend/components/_badge.scss
Component's defaults:/library/components/badge/_defaults.scss
NameDefault valueNote
$badge-font-size.75em
$badge-font-weight$font-weight-bold
$badge-colorproperty.get(main-text-color)Requires @use "@library/sass/modules/property";
$badge-padding-y.35em
$badge-padding-x.65em
$badge-border-radius$border-radius
$badge-dot-default-size10px
$badge-dot-default-border-width1px
$badge-dot-small-size6px
$badge-dot-small-border-width1px
$badge-dot-medium-size8px
$badge-dot-medium-border-width1px
$badge-dot-large-size12px
$badge-dot-large-border-width2px

Make sure to read the Customize components and Understanding and using the design system guides.

{title}