Documentation v8.0.36

Preview Downloads Purchase

Overview

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

Basic

Use .badgewith .badge-{color}classes to set a badge's style defined with $theme-colorsmapped 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 .badgewith .badge-light-{color}classes to set a badge's light style defined with $theme-light-colorsmapped 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-squareclass 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-circleclass 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>

Bootstrap Buttons

Use a badge with .badge-circleclass 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-circleclasses 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
$ 939
Custom License
Reach us for custom license offers.
Buy Now
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