Modules

Badge

Badge is a module for displaying something countable.

Usage #

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

1 2 3 4 5 6
<span class="badge">1</span>
<span class="badge badge-primary">2</span>
<span class="badge badge-positive">3</span>
<span class="badge badge-important">4</span>
<span class="badge badge-dark">5</span>
<span class="badge badge-light">6</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 badge-primary">2</span>
            </div>
        </li>
        <li class="menu-item">
            <div class="menu-link-box">
                <a href="#" class="menu-link">Messages</a>
                <span class="badge badge-positive">3</span>
            </div>
        </li>
    </ul>
</nav>

Scales #

By default, badges come in several sizes.

  • default
  • large
  • huge
  • mega
1 2 3 4
<span class="badge badge-primary">1</span>
<span class="badge badge-primary badge-large">2</span>
<span class="badge badge-primary badge-huge">3</span>
<span class="badge badge-primary 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: var(--type-scale-28);
    --badge-size: 60px;
}

Now you have a new badge-giga size modifier.

2
<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-primary {
    --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-primary modifier looks different than the default one. It has a yellow background and border.

5 5 5 5
<span class="badge badge-primary">5</span>
<span class="badge badge-primary badge-large">5</span>
<span class="badge badge-primary badge-huge">5</span>
<span class="badge badge-primary 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.

5 5 5 5
<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: var(--palette-transparent);
    --badge-border-color: var(--palette-neutral-mid);
    --badge-color: var(--palette-neutral-darker);
}
.badge-outline.badge-primary {
    --badge-background-color: var(--palette-transparent);
    --badge-border-color: var(--palette-primary-light);
    --badge-color: var(--palette-primary-dark);
}
.badge-outline.badge-positive {
    --badge-background-color: var(--palette-transparent);
    --badge-border-color: var(--palette-positive-light);
    --badge-color: var(--palette-positive-dark);
}
.badge-outline.badge-important {
    --badge-background-color: var(--palette-transparent);
    --badge-border-color: var(--palette-negative-light);
    --badge-color: var(--palette-negative-dark);
}
.badge-outline.badge-dark {
    --badge-background-color: var(--palette-transparent);
    --badge-border-color: var(--palette-black-80);
    --badge-color: var(--palette-black);
}
.badge-outline.badge-light {
    --badge-background-color: var(--palette-transparent);
    --badge-border-color: var(--palette-white-80);
    --badge-color: var(--palette-white);
}

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

1 2 3 4 5 6
<span class="badge badge-outline">1</span>
<span class="badge badge-outline badge-primary">2</span>
<span class="badge badge-outline badge-positive">3</span>
<span class="badge badge-outline badge-important">4</span>
<span class="badge badge-outline badge-dark">5</span>
<span class="badge badge-outline badge-light">6</span>

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

1 2
<span class="badge badge-primary">1</span>
<span class="badge badge-outline badge-primary">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:

2 2 2 2
<span class="badge badge-square badge-positive">2</span>
<span class="badge badge-square badge-large badge-positive">2</span>
<span class="badge badge-square badge-huge badge-positive">2</span>
<span class="badge badge-square badge-mega badge-positive">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 #

The default properties and colors of the module are shown below. These are all specified in the source of framework. This is here for clarity and to simplify modification and overriding of values.


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

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