# Documentation v8.0.38

Preview Downloads Purchase

# Overview

Metronic customizes the Bootstrap Badges through the SASS variables in `src/sass/components/_variables.scss`and adds additonal options in `src/sass/components/_badge`.

# Basic

Use `.badge`with `.badge-{color}`classes to set a badge's style defined with `$theme-colors`mapped in `src/sass/components/_variables.scss`:
New New New New New New New New New

    <span class="badge badge-white">New</span>
    <span class="badge badge-primary">New</span>
    <span class="badge badge-light">New</span>
    <span class="badge badge-secondary">New</span>
    <span class="badge badge-success">New</span>
    <span class="badge badge-info">New</span>
    <span class="badge badge-warning">New</span>
    <span class="badge badge-danger">New</span>
    <span class="badge badge-dark">New</span>

# Light Style

Use `.badge`with `.badge-light-{color}`classes to set a badge's light style defined with `$theme-light-colors`mapped in `src/sass/components/_variables.scss`:
New New New New New New

    <span class="badge badge-light-primary">New</span>
    <span class="badge badge-light-success">New</span>
    <span class="badge badge-light-info">New</span>
    <span class="badge badge-light-warning">New</span>
    <span class="badge badge-light-danger">New</span>
    <span class="badge badge-light-dark">New</span>

# Square Badge

Use `.badge-square`class to use a badge with same width and height:
5 5 5 5 5 5 5 5 5

    <span class="badge badge-square badge-white">5</span>
    <span class="badge badge-square badge-primary">5</span>
    <span class="badge badge-square badge-light">5</span>
    <span class="badge badge-square badge-secondary">5</span>
    <span class="badge badge-square badge-success">5</span>
    <span class="badge badge-square badge-info">5</span>
    <span class="badge badge-square badge-warning">5</span>
    <span class="badge badge-square badge-danger">5</span>
    <span class="badge badge-square badge-dark">5</span>

# Circle Badge

Use `.badge-circle`class to use a badge with circle style:
5 5 5 5 5 5 5 5 5

    <span class="badge badge-circle badge-white">5</span>
    <span class="badge badge-circle badge-primary">5</span>
    <span class="badge badge-circle badge-light">5</span>
    <span class="badge badge-circle badge-secondary">5</span>
    <span class="badge badge-circle badge-success">5</span>
    <span class="badge badge-circle badge-info">5</span>
    <span class="badge badge-circle badge-warning">5</span>
    <span class="badge badge-circle badge-danger">5</span>
    <span class="badge badge-circle badge-dark">5</span>

# Size Options

Use `.badge-sm`or `.badge-lg`to change Badge size according to the Bootstrap standards:
New 3 4
New 3 4
New 3 4

    <span class="badge badge-primary badge-sm">New</span>
    <span class="badge badge-primary badge-circle badge-sm">3</span>
    <span class="badge badge-primary badge-square badge-sm">4</span>

    <span class="badge badge-primary badge">New</span>
    <span class="badge badge-primary badge-circle">3</span>
    <span class="badge badge-primary badge-square ">4</span>

    <span class="badge badge-primary badge-lg">New</span>
    <span class="badge badge-primary badge-circle badge-lg">3</span>
    <span class="badge badge-primary badge-square badge-lg">4</span>

# Bootstrap Buttons

Use a badge with `.badge-circle`class in a Bootstrap Button element:

    <button class="btn btn-primary position-relative me-5">
        Button <span class="position-absolute top-0 start-0 translate-middle  badge badge-circle badge-danger">5</span>
    </button>

    <button class="btn btn-success position-relative me-5">
        Button <span class="position-absolute top-100 start-0 translate-middle  badge badge-circle badge-warning">5</span>
    </button>

    <button class="btn btn-danger position-relative me-5">
        Button <span class="position-absolute top-0 start-100 translate-middle  badge badge-circle badge-primary">5</span>
    </button>

    <button class="btn btn-warning position-relative">
        Button <span class="position-absolute top-100 start-100 translate-middle  badge badge-circle badge-success">5</span>
    </button>

# Inside Button

Use a badge with `.badge-circle`classes inside button:

    <button class="btn btn-primary me-5">
        Notifications <span class="badge badge-circle badge-warning ms-2">5</span>
    </button>

    <button class="btn btn-success me-5">
        Messages <span class="badge badge-circle badge-danger ms-2">4</span>
    </button>

    <button class="btn btn-danger me-5">
        Orders <span class="badge badge-circle badge-primary ms-2">4</span>
    </button>

    <button class="btn btn-danger me-5">
        Profile <span class="badge badge-circle badge-white ms-2">3</span>
    </button>

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now