Badges
Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.
Default markup
The default badges are square and come in the basic set of colors.
<div class="badges-list">
<span class="badge bg-blue text-blue-fg">Blue</span>
<span class="badge bg-azure text-azure-fg">Azure</span>
<span class="badge bg-indigo text-indigo-fg">Indigo</span>
<span class="badge bg-purple text-purple-fg">Purple</span>
<span class="badge bg-pink text-pink-fg">Pink</span>
<span class="badge bg-red text-red-fg">Red</span>
<span class="badge bg-orange text-orange-fg">Orange</span>
<span class="badge bg-yellow text-yellow-fg">Yellow</span>
<span class="badge bg-lime text-lime-fg">Lime</span>
<span class="badge bg-green text-green-fg">Green</span>
<span class="badge bg-teal text-teal-fg">Teal</span>
<span class="badge bg-cyan text-cyan-fg">Cyan</span>
</div>Headings
Badges can be used in headings to draw attention to new or important information. You can use them in any heading level, from <h1> to <h6>. The example below shows how to use badges in headings.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<h1>
Example heading
<span class="badge">New</span>
</h1>
<h2>
Example heading
<span class="badge">New</span>
</h2>
<h3>
Example heading
<span class="badge">New</span>
</h3>
<h4>
Example heading
<span class="badge">New</span>
</h4>
<h5>
Example heading
<span class="badge">New</span>
</h5>
<h6>
Example heading
<span class="badge">New</span>
</h6>Light versions of badges
You can use the -lt classes to create a light version of the badge. This is useful for creating a more subtle look.
For example you can use the bg-blue-lt class to create a light blue badge. If you add the text-blue-lt-fg class, the text will be blue as well.
<span class="badge bg-blue-lt text-blue-lt-fg">Blue</span>
<span class="badge bg-azure-lt text-azure-lt-fg">Azure</span>
<span class="badge bg-indigo-lt text-indigo-lt-fg">Indigo</span>
<span class="badge bg-purple-lt text-purple-lt-fg">Purple</span>
<span class="badge bg-pink-lt text-pink-lt-fg">Pink</span>
<span class="badge bg-red-lt text-red-lt-fg">Red</span>
<span class="badge bg-orange-lt text-orange-lt-fg">Orange</span>
<span class="badge bg-yellow-lt text-yellow-lt-fg">Yellow</span>
<span class="badge bg-lime-lt text-lime-lt-fg">Lime</span>
<span class="badge bg-green-lt text-green-lt-fg">Green</span>
<span class="badge bg-teal-lt text-teal-lt-fg">Teal</span>
<span class="badge bg-cyan-lt text-cyan-lt-fg">Cyan</span>Pill badges
Use the .badge-pill class if you want to create a badge with rounded corners. Its width will adjust to the label text.
<span class="badge bg-blue text-blue-fg badge-pill">Blue</span>
<span class="badge bg-azure text-azure-fg badge-pill">Azure</span>
<span class="badge bg-indigo text-indigo-fg badge-pill">Indigo</span>
<span class="badge bg-purple text-purple-fg badge-pill">Purple</span>
<span class="badge bg-pink text-pink-fg badge-pill">Pink</span>
<span class="badge bg-red text-red-fg badge-pill">Red</span>
<span class="badge bg-orange text-orange-fg badge-pill">Orange</span>
<span class="badge bg-yellow text-yellow-fg badge-pill">Yellow</span>
<span class="badge bg-lime text-lime-fg badge-pill">Lime</span>
<span class="badge bg-green text-green-fg badge-pill">Green</span>
<span class="badge bg-teal text-teal-fg badge-pill">Teal</span>
<span class="badge bg-cyan text-cyan-fg badge-pill">Cyan</span>You can use it to create a pill with numbers, for example, to show the number of unread messages. The badge will adjust its width to the number of digits.
<span class="badge bg-blue text-blue-fg badge-pill">1</span>
<span class="badge bg-azure text-azure-fg badge-pill">2</span>
<span class="badge bg-indigo text-indigo-fg badge-pill">3</span>
<span class="badge bg-purple text-purple-fg badge-pill">4</span>
<span class="badge bg-pink text-pink-fg badge-pill">5</span>
<span class="badge bg-red text-red-fg badge-pill">6</span>
<span class="badge bg-orange text-orange-fg badge-pill">7</span>
<span class="badge bg-yellow text-yellow-fg badge-pill">8</span>
<span class="badge bg-lime text-lime-fg badge-pill">9</span>
<span class="badge bg-green text-green-fg badge-pill">10</span>
<span class="badge bg-teal text-teal-fg badge-pill">11</span>
<span class="badge bg-cyan text-cyan-fg badge-pill">12</span>Badges with icons
You can use icons in badges to make them more visually appealing. The example below demonstrates how to use icons in badges.
<span
class="badge"><!-- Download SVG icon from http://tabler.io/icons/icon/star -->
<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="icon icon-1">
<path
d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
</svg>Star</span>
<span
class="badge"><!-- Download SVG icon from http://tabler.io/icons/icon/heart -->
<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="icon icon-1">
<path
d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
</svg>Heart</span>
<span
class="badge"><!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<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="icon icon-1">
<path d="M5 12l5 5l10 -10" />
</svg>Check</span>
<span
class="badge"><!-- Download SVG icon from http://tabler.io/icons/icon/x -->
<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="icon icon-1">
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg>X</span>
<span
class="badge"><!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
<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="icon icon-1">
<path d="M12 5l0 14" />
<path d="M5 12l14 0" />
</svg>Plus</span>
<span
class="badge"><!-- Download SVG icon from http://tabler.io/icons/icon/minus -->
<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="icon icon-1">
<path d="M5 12l14 0" />
</svg>Minus</span>You can also use an icon on the right side of the badge. The example below demonstrates how to use icons on the right side of badges.
<span class="badge">Star</span>
<span class="badge">Heart</span>
<span class="badge">Check</span>
<span class="badge">X</span>
<span class="badge">Plus</span>
<span class="badge">Minus</span>Links
Place the badge within an <a> element if you want it to perform the function of a link and make it clickable.
<a href="#" class="badge bg-blue-lt">Blue</a>
<a href="#" class="badge bg-azure-lt">Azure</a>
<a href="#" class="badge bg-indigo-lt">Indigo</a>
<a href="#" class="badge bg-purple-lt">Purple</a>
<a href="#" class="badge bg-pink-lt">Pink</a>
<a href="#" class="badge bg-red-lt">Red</a>
<a href="#" class="badge bg-orange-lt">Orange</a>
<a href="#" class="badge bg-yellow-lt">Yellow</a>
<a href="#" class="badge bg-lime-lt">Lime</a>
<a href="#" class="badge bg-green-lt">Green</a>
<a href="#" class="badge bg-teal-lt">Teal</a>
<a href="#" class="badge bg-cyan-lt">Cyan</a>Button with badge
Badges can be used as parts of links or buttons to provide, for example, a counter. Use the .badge-notification class to create a notification badge. This class will position the badge in the top right corner of the button.
If you don't provide text for the badge, you end up with a small dot. This is useful for creating a simple notification button.
<button type="button" class="btn">
Notifications <span class="badge bg-red text-red-fg ms-2">2</span>
</button>
<button type="button" class="btn">
Inbox <span class="badge bg-red text-red-fg badge-notification">4</span>
</button>
<button type="button" class="btn">
Profile <span class="badge bg-red text-red-fg badge-notification"></span>
</button>Animated badges
You can use the .badge-blink class to create a blinking effect. This class will add a CSS animation to the badge, so it will blink to draw attention.
<button type="button" class="btn">
Profile <span
class="badge bg-red text-red-fg badge-notification badge-blink"></span>
</button>Size Options
Use .badge-sm or .badge-lg to change badge size according to your needs. The default size is .badge and it is used in the examples above.
<div>
<span class="badge badge-sm bg-primary text-primary-fg badge-sm">New</span>
<span class="badge badge-sm bg-primary text-primary-fg badge-pill">1</span>
</div>
<div>
<span class="badge bg-primary text-primary-fg badge-sm">New</span>
<span class="badge bg-primary text-primary-fg badge-pill">1</span>
</div>
<div>
<span class="badge badge-lg bg-primary text-primary-fg badge-sm">New</span>
<span class="badge badge-lg bg-primary text-primary-fg badge-pill">1</span>
</div>More examples
If you want to see more examples of badges, you can check out the Bootstrap documentation for badges. You can also find more examples in the Tabler Badges preview.
Table of Contents
