#### 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>