Badge

Usage #

By default, the badge module has the badge class and several color modifiers to show different types.

<span class="badge">1</span>
<span class="badge badge-dark">2</span>
<span class="badge badge-light">3</span>

Examples #

Badges are well placed in other modules, for example, inside the Button module.

<button class="button">
    <span>Button</span>
    <span class="badge ml-1">5</span>
</button>
<button class="button button-primary">
    <span>Button</span>
    <span class="badge badge-light ml-1">5</span>
</button>

Or inside the Menu module.

<nav class="menu menu-stacked">
    <ul class="menu-list">
        <li class="menu-item">
            <div class="menu-link-box">
                <a href="#" class="menu-link">News</a>
                <span class="badge">1</span>
            </div>
        </li>
        <li class="menu-item">
            <div class="menu-link-box">
                <a href="#" class="menu-link">Analytics</a>
                <span class="badge">2</span>
            </div>
        </li>
        <li class="menu-item">
            <div class="menu-link-box">
                <a href="#" class="menu-link">Messages</a>
                <span class="badge">3</span>
            </div>
        </li>
    </ul>
</nav>

Scales #

By default, badges come in several sizes.

• default
• large
• huge
• mega

<span class="badge">1</span>
<span class="badge badge-large">2</span>
<span class="badge badge-huge">3</span>
<span class="badge badge-mega">4</span>

You can add your own size or change an existing one by creating a modifier and specifying new badge parameters in your custom SCSS.

.badge-giga {
    --badge-font-size: 28px;
    --badge-size: 60px;
}

Now you have a new badge-giga size modifier.

<span class="badge badge-primary badge-giga">2</span>

Colors #

Override the existing colors

To change the color of a specific badge, simply override its color variables. You can do this in your custom SCSS. See also how to customize the framework.

.badge {
    --badge-background-color: var(--palette-yellow-lightest);
    --badge-border-color: var(--palette-yellow-light);
    --badge-color: var(--palette-yellow-darker);
}

Now the badge with the badge looks different than the default one. It has a yellow background and border.

<span class="badge">5</span>
<span class="badge badge-large">5</span>
<span class="badge badge-huge">5</span>
<span class="badge badge-mega">5</span>

Add a color

You can add a new color to the badge by creating a color class in your custom SCSS and specifying the variable colors from the palette.

.badge-accent {
    --badge-background-color: var(--palette-yellow-base);
    --badge-color: var(--palette-black);
}

Now you have a new badge with the specified color variables.

<span class="badge badge-accent">5</span>
<span class="badge badge-accent badge-large">5</span>
<span class="badge badge-accent badge-huge">5</span>
<span class="badge badge-accent badge-mega">5</span>

Add a color group

You can add a new color group for the badge.

.badge-outline.badge {
    --badge-background-color: transparent;
    --badge-border-color: var(--palette-neutral-mid);
    --badge-color: var(--palette-neutral-darker);
}
.badge-outline.badge-dark {
    --badge-background-color: transparent;
    --badge-border-color: var(--palette-black-80);
    --badge-color: var(--palette-black);
}
.badge-outline.badge-light {
    --badge-background-color: transparent;
    --badge-border-color: var(--palette-white-80);
    --badge-color: var(--palette-white);
}

Here's how it might look and be used in HTML.

<span class="badge badge-outline">1</span>
<span class="badge badge-outline badge-dark">2</span>
<span class="badge badge-outline badge-light">3</span>

You can use both badges in your HTML, even at the same time.

<span class="badge badge-dark">1</span>
<span class="badge badge-outline badge-dark">2</span>

Variants #

Create variants

You can create your own modifiers with different badge parameters. To do this, add the necessary badge classes and their variables to your custom SCSS. See also how to customize the framework.

.badge-square {
    --badge-border-radius: var(--radius-small);
}

In HTML it will look like this:

<span class="badge badge-square badge-dark">2</span>
<span class="badge badge-square badge-large badge-dark">2</span>
<span class="badge badge-square badge-huge badge-dark">2</span>
<span class="badge badge-square badge-mega badge-dark">2</span>

Override the existing variant

To change the default badge parameters, simply specify new values for the variables in your custom SCSS.

.badge {
    // vars
    --badge-font-weight: bold;
    --badge-size: 22px;

    // props
    font-family: var(--font-mono);
}

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.

// colors
--badge-background-color: var(--palette-neutral-lighter);
--badge-border-color: transparent;
--badge-color: var(--palette-neutral-darker);

// params
--badge-font-size: 12px;
--badge-font-weight: var(--font-weight-semibold);
--badge-border-radius: 99px;
--badge-padding: 1px 4px;
--badge-border-width: 1px;
--badge-border-style: solid;
--badge-line-height: 16px;
--badge-size: 20px;