Don't Miss Out! Our new update has been released.
Tag & Pills
Badges Contextual Variations
Use badge class to make more badges.
PrimarySecondarySuccessInfoWarningDangerLightDark
<div class="badge-spacing">
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light txt-dark">Light</span>
<span class="badge badge-dark">Dark</span>
</div>Badges Outline Contextual Variations
Use badge class to make more badges.
PrimarySecondarySuccessInfoWarningDangerLightDark
<div class="badge-spacing">
<span class="badge badge-b-primary txt-primary">Primary</span>
<span class="badge badge-b-secondary txt-secondary">Secondary</span>
<span class="badge badge-b-success txt-success">Success</span>
<span class="badge badge-b-info txt-info">Info</span>
<span class="badge badge-b-warning txt-warning">Warning</span>
<span class="badge badge-b-danger txt-danger">Danger</span>
<span class="badge badge-b-light txt-dark">Light</span>
<span class="badge badge-b-dark txt-dark">Dark</span>
</div>Pill Contextual Variations
Use rounded-full class to make badges with background (badge-*) more rounded with a larger border-radius .
PrimarySecondarySuccessInfoWarningDangerLightDark
<div class="badge-spacing">
<span class="badge text-white rounded-full badge-primary">Primary</span>
<span class="badge text-white rounded-full badge-secondary">Secondary</span>
<span class="badge text-white rounded-full badge-success">Success</span>
<span class="badge text-white rounded-full badge-info">Info</span>
<span class="badge text-white rounded-full badge-warning">Warning</span>
<span class="badge text-white rounded-full badge-danger">Danger</span>
<span class="badge text-white rounded-full badge-light txt-dark">Light</span>
<span class="badge text-white rounded-full badge-dark">Dark</span>
</div>Pill Outline Variations
Use rounded-full class to make badges with background (badge-b-*) more rounded with a larger border-radius.
PrimarySecondarySuccessInfoWarningDangerLightDark
<div class="badge-spacing">
<span class="badge rounded-full txt-primary badge-b-primary">Primary</span>
<span class="badge rounded-full txt-secondary badge-b-secondary">Secondary</span>
<span class="badge rounded-full txt-success badge-b-success">Success</span>
<span class="badge rounded-full txt-info badge-b-info">Info</span>
<span class="badge rounded-full txt-warning badge-b-warning">Warning</span>
<span class="badge rounded-full txt-danger badge-b-danger">Danger</span>
<span class="badge rounded-full txt-light badge-b-light txt-dark">Light</span>
<span class="badge rounded-full txt-dark badge-b-dark">Dark</span>
</div>Number of Badges
Use badge class to make square badges with numbers.
<div class="badge-spacing">
<a class="badge text-white rounded badge-primary" href="#">1</a>
<a class="badge text-white rounded badge-secondary" href="#">2</a>
<a class="badge text-white rounded badge-success" href="#">3</a>
<a class="badge text-white rounded badge-info" href="#">4</a>
<a class="badge text-white rounded badge-warning" href="#">5</a>
<a class="badge text-white rounded badge-danger" href="#">6</a>
<a class="badge rounded badge-light txt-dark" href="#">7</a>
<a class="badge text-white rounded badge-dark" href="#">8</a>
</div>Number of Pill Badges
Use rounded-full class to make rounded badges with numbers.
12345678
<div class="badge-spacing">
<span class="badge rounded-full text-white badge-p-space badge-primary">1</span>
<span class="badge rounded-full text-white badge-p-space badge-secondary">2</span>
<span class="badge rounded-full text-white badge-p-space badge-success">3</span>
<span class="badge rounded-full text-white badge-p-space badge-info">4</span>
<span class="badge rounded-full text-white badge-p-space badge-warning">5</span>
<span class="badge rounded-full text-white badge-p-space badge-danger">6</span>
<span class="badge rounded-full text-white badge-p-space badge-light txt-dark">7</span>
<span class="badge rounded-full text-white badge-p-space badge-dark">8</span>
</div>
Badge Tag with Icons
Use badge class to make square badges with icons.
<div class="badge-spacing">
<a class="badge rounded b-ln-height badge-primary" href="#">
<i class="stroke-white" data-feather="dollar-sign"></i>
</a>
<a class="badge rounded b-ln-height badge-secondary" href="#">
<i class="stroke-white" data-feather="headphones"></i>
</a>
<a class="badge rounded b-ln-height badge-success" href="#">
<i class="stroke-white" data-feather="link"></i>
</a>
<a class="badge rounded b-ln-height badge-info" href="#">
<i class="stroke-white" data-feather="github"></i>
</a>
<a class="badge rounded b-ln-height badge-warning" href="#">
<i class="stroke-white" data-feather="award"></i>
</a>
<a class="badge rounded b-ln-height badge-danger" href="#">
<i class="stroke-white" data-feather="activity"></i>
</a>
<a class="badge rounded b-ln-height badge-light txt-dark" href="#">
<i class="stroke-white" data-feather="heart"></i>
</a>
<a class="badge rounded badge-dark" href="#">
<i class="stroke-white" data-feather="mail"></i>
</a>
</div>Rounded Pills with Icons
Use rounded-full class to make rounded badges with icons.
<div class="badge-spacing">
<a class="badge rounded-full p-2 badge-primary" href="#">
<i class="stroke-white" data-feather="dollar-sign"></i>
</a>
<a class="badge rounded-full p-2 badge-secondary" href="#">
<i class="stroke-white" data-feather="headphones"></i>
</a>
<a class="badge rounded-full p-2 badge-success" href="#">
<i class="stroke-white" data-feather="link"></i>
</a>
<a class="badge rounded-full p-2 badge-info" href="#">
<i class="stroke-white" data-feather="github"></i>
</a>
<a class="badge rounded-full p-2 badge-warning" href="#">
<i class="stroke-white" data-feather="award"></i>
</a>
<a class="badge rounded-full p-2 badge-danger" href="#">
<i class="stroke-white" data-feather="activity"></i>
</a>
<a class="badge rounded-full p-2 badge-light txt-dark" href="#">
<i class="stroke-white" data-feather="heart"></i>
</a>
<a class="badge rounded-full p-2 badge-dark" href="#">
<i class="stroke-white" data-feather="mail"></i>
</a>
</div>Badge Headings
All html headings, <h1> through <h6> , are available in badge tags.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<div class="card-body badge-heading">
<h1>Example heading
<span class="badge text-white rounded text-bg-secondary">New</span>
</h1>
<h2>Example heading
<span class="badge text-white rounded text-bg-secondary">New</span>
</h2>
<h3>Example heading
<span class="badge text-white rounded text-bg-secondary">New</span>
</h3>
<h4>Example heading
<span class="badge text-white rounded text-bg-secondary">New</span>
</h4>
<h5>Example heading
<span class="badge text-white rounded text-bg-secondary">New</span>
</h5>
<h6>Example heading
<span class="badge text-white rounded text-bg-secondary">New</span>
</h6>
</div>Positioned Badges
Use utilities to modify a badge and position it in the corner of a link or button.
<div class="badge-flex">
<button class="btn text-white rounded btn-primary relative" type="button">Inbox
<span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge rounded-full bg-danger">99+</span>
</button>
<button class="btn text-white rounded btn-primary relative" type="button">Inbox
<span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge rounded-full bg-danger">99+</span>
</button>
<button class="btn text-white rounded btn-info relative badge-square" type="button">
<i class="fa-brands fa-twitter"></i>
<span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge rounded-full bg-danger">8</span>
</button>
<button class="btn text-white rounded btn-primary relative" type="button">Profile
<span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle bg-danger border border-light rounded-full badge-p-5">
<span class="visually-hidden">New alerts</span>
</span>
</button>
<button class="btn text-white rounded btn-info relative badge-square" type="button">
<i class="fa-brands fa-linkedin-in"></i>
<span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge-p-5 bg-danger border border-light rounded-full">
<span class="visually-hidden">New alerts</span>
</span>
</button>
<button class="btn text-white rounded btn-success relative badge-square" type="button">
<i class="fa-solid fa-comments"></i>
<span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge-p-5 bg-danger border border-light rounded-full">
<span class="visually-hidden">New alerts</span>
</span>
</button>
<button class="btn text-white rounded btn-info relative badge-square" type="button">
<i class="fa-brands fa-twitter"></i>
<span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge-p-5 bg-danger border border-light rounded-full">
<span class="visually-hidden">New alerts</span>
</span>
</button>
</div>Button Badges
badge can be used as part of links or buttons to provide a counter.
<div class="badge-flex">
<button class="btn btn-primary rounded">Notifications
<span class="badge text-bg-danger ms-2">4</span>
</button>
<button class="btn button-light-primary rounded">Sale
<span class="badge text-bg-danger rounded-full ms-2">9</span>
</button>
<button class="btn border-dashed-primary rounded">Instagram
<span class="badge text-bg-danger ms-2">6</span>
</button>
<button class="btn btn-pill button-light-info txt-info rounded">LinkedIn
<span class="badge text-bg-info rounded-full ms-2 txt-light">3</span>
</button>
</div>
Image Badges
Use image-badges class to set image sizes.
Primary
Secondary 
Success 
Danger
Warning
Info
Light
Dark <div class="badge-spacing image-badges">
<span class="badge common-align txt-primary badge-l-primary rounded border border-primary">
<img class="rounded me-1" src="../assets/images/dashboard-9/user/5.png" alt="user">Primary
</span>
<span class="badge common-align txt-secondary badge-l-secondary rounded border border-secondary">
<img class="rounded me-1" src="../assets/images/dashboard-9/user/2.png" alt="user">Secondary
</span>
<span class="badge common-align txt-success badge-l-success rounded border border-success">
<img class="rounded me-1" src="../assets/images/dashboard-9/user/3.png" alt="user">Success
</span>
<span class="badge common-align txt-danger badge-l-danger rounded border border-danger">
<img class="rounded me-1" src="../assets/images/dashboard-9/user/4.png" alt="user">Danger
</span>
<span class="badge common-align txt-warning badge-l-warning rounded border border-warning">
<img class="rounded me-1" src="../assets/images/dashboard/user/11.jpg" alt="user">Warning
</span>
<span class="badge common-align txt-info rounded badge-l-info border border-info">
<img class="rounded me-1" src="../assets/images/dashboard/user/4.jpg" alt="user">Info
</span>
<span class="badge common-align txt-light rounded badge-l-light border border-light">
<img class="rounded me-1" src="../assets/images/dashboard/user/10.jpg" alt="user">Light
</span>
<span class="badge common-align txt-dark rounded badge-l-dark border border-dark">
<img class="rounded me-1" src="../assets/images/dashboard/user/7.jpg" alt="user">Dark
</span>
</div>
Close Badges
Use badge-l-*classes to provide background-colors and border-* classes to provide border-colors.
Primary Secondary Success Danger Warning Info Light Dark
<div class="badge-spacing image-badges">
<span class="badge common-align txt-primary badge-l-primary rounded-full border border-primary">Primary
<a href="#!">
<i class="ms-1 stroke-primary" data-feather="x-circle"></i>
</a>
</span>
<span class="badge common-align txt-secondary badge-l-secondary rounded-full border border-secondary">Secondary
<a href="#!">
<i class="ms-1 stroke-secondary" data-feather="x-circle"></i>
</a>
</span>
<span class="badge common-align txt-success badge-l-success rounded-full border border-success">Success
<a href="#!">
<i class="ms-1 stroke-success" data-feather="x-circle"></i>
</a>
</span>
<span class="badge common-align txt-danger badge-l-danger rounded-full border border-danger">Danger
<a href="#!">
<i class="ms-1 stroke-danger" data-feather="x-circle"></i>
</a>
</span>
<span class="badge common-align txt-warning badge-l-warning rounded-full border border-warning">Warning
<a href="#!">
<i class="ms-1 stroke-warning" data-feather="x-circle"></i>
</a>
</span>
<span class="badge common-align txt-info badge-l-info rounded-full border border-info">Info
<a href="#!">
<i class="ms-1 stroke-info" data-feather="x-circle"></i>
</a>
</span>
<span class="badge common-align txt-light badge-l-light rounded-full border border-light">Light
<a href="#!">
<i class="ms-1 stroke-light" data-feather="x-circle"></i>
</a>
</span>
<span class="badge common-align txt-dark badge-l-dark rounded-full border border-dark">Dark
<a href="#!">
<i class="ms-1 stroke-dark" data-feather="x-circle"></i>
</a>
</span>
</div>Image with Close Badges
Use badge-l-* classes to provide background-color. and vr classes to partitions.
Primary
Secondary 
Success 
Danger 
Warning 
Info 
Light 
Dark <div class="badge-spacing image-badges">
<span class="badge common-align txt-primary badge-l-primary rounded-full border border-primary">
<img class="rounded-full me-1" src="../assets/images/dashboard/user/1.jpg" alt="user">Primary
<span class="vr mx-2"></span>
<a href="#!">
<i class="stroke-primary" data-feather="x-circle"></i>
</a>
</span>
<span class="badge common-align txt-secondary rounded-full badge-l-secondary border border-secondary">
<img class="rounded-full me-1" src="../assets/images/dashboard/user/2.jpg" alt="user">Secondary
<span class="vr mx-2"></span>
<a href="#!">
<i class="stroke-secondary" data-feather="x-circle"></i>
</a>
</span>
<span class="badge common-align txt-success rounded-full badge-l-success border border-success">
<img class="rounded-full me-1" src="../assets/images/dashboard/user/3.jpg" alt="user">Success
<span class="vr mx-2"></span>
<a href="#!">
<i class="stroke-success" data-feather="x-circle"></i>
</a>
</span>
<span class="badge common-align txt-danger rounded-full badge-l-danger border border-danger">
<img class="rounded-full me-1" src="../assets/images/dashboard/user/5.jpg" alt="user">Danger
<span class="vr mx-2"></span>
<a href="#!">
<i class="stroke-danger" data-feather="x-circle"></i>
</a>
</span>
<span class="badge common-align txt-warning badge-l-warning rounded-full border border-warning">
<img class="rounded-full me-1" src="../assets/images/dashboard/user/6.jpg" alt="user">Warning
<span class="vr mx-2"></span>
<a href="#!">
<i class="stroke-warning" data-feather="x-circle"></i>
</a>
</span>
<span class="badge common-align txt-info rounded-full badge-l-info border border-info">
<img class="rounded-full me-1" src="../assets/images/dashboard/user/12.jpg" alt="user">Info
<span class="vr mx-2"></span>
<a href="#!">
<i class="stroke-info" data-feather="x-circle"></i>
</a>
</span>
<span class="badge common-align txt-light rounded-full badge-l-light border border-light">
<img class="rounded-full me-1" src="../assets/images/user/3.png" alt="user">Light
<span class="vr mx-2"></span>
<a href="#!">
<i class="stroke-light" data-feather="x-circle"></i>
</a>
</span>
<span class="badge common-align txt-dark rounded-full badge-l-dark border border-dark">
<img class="rounded-full me-1" src="../assets/images/user/6.jpg" alt="user">Dark
<span class="vr mx-2"></span>
<a href="#!">
<i class="stroke-dark" data-feather="x-circle"></i>
</a>
</span>
</div>