Default

Primary Info Success Secondary Warning Danger Dark 
<span class="badge badge-primary mb-2 me-4">Primary</span>
<span class="badge badge-info mb-2 me-4">Info</span>
<span class="badge badge-success mb-2 me-4">Success</span>
<span class="badge badge-secondary mb-2 me-4">Secondary</span>
<span class="badge badge-warning mb-2 me-4">Warning</span>
<span class="badge badge-danger mb-2 me-4">Danger</span>
<span class="badge badge-dark mb-2 me-4">Dark</span>

Light

Primary Info Success Secondary Warning Danger Dark 
        <span class="badge badge-light-primary mb-2 me-4">Primary</span>
        <span class="badge badge-light-info mb-2 me-4">Info</span>
        <span class="badge badge-light-success mb-2 me-4">Success</span>
        <span class="badge badge-light-secondary mb-2 me-4">Secondary</span>
        <span class="badge badge-light-warning mb-2 me-4">Warning</span>
        <span class="badge badge-light-danger mb-2 me-4">Danger</span>
        <span class="badge badge-light-dark mb-2 me-4">Dark</span>

Outline

Primary Info Success Secondary Warning Danger Dark 
<span class="badge outline-badge-primary mb-2 me-4">Primary</span>
<span class="badge outline-badge-info mb-2 me-4">Info</span>
<span class="badge outline-badge-success mb-2 me-4">Success</span>
<span class="badge outline-badge-secondary mb-2 me-4">Secondary</span>
<span class="badge outline-badge-warning mb-2 me-4">Warning</span>
<span class="badge outline-badge-danger mb-2 me-4">Danger</span>
<span class="badge outline-badge-dark mb-2 me-4">Dark</span>

With Icons

To apply icons just add the SVG code inside the badge

Primary Info Success 
<span class="badge badge-primary mb-2 me-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg> Primary</span>
<span class="badge badge-light-info mb-2 me-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg> Info</span>
<span class="badge outline-badge-success mb-2 me-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg> Success</span>

Dot

Add .badge-dot class to badges and wrap it with a .badge--group div

<div class="badge--group">
    <div class="badge badge-primary badge-dot"></div>
    <div class="badge badge-danger badge-dot"></div>
    <div class="badge badge-info badge-dot"></div>
</div>

Custom Badges

<button class="btn btn-success position-relative mb-2 me-4">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
    <span class="btn-text-inner">Chat</span>
    <span class="badge badge-danger counter">9</span>
</button>

<button class="btn btn-info position-relative mb-2 me-4">
    <span class="btn-text-inner">Tweets</span>
    <span class="badge badge-danger counter">4</span>
</button>

<button class="btn btn-primary position-relative btn-icon mb-2 me-4">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
    <span class="badge badge-danger counter">2</span>
</button>

<button class="btn btn-secondary position-relative btn-icon btn-rounded mb-2 me-4">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
    <span class="badge badge-danger counter">8</span>
</button>

<button type="button" class="btn btn-dark mb-2 me-4">
    Notifications <span class="badge bg-light text-dark ms-2">4</span>
</button>

Copyright © 2022 DesignReset, All rights reserved.

Coded with