Badges
Create handsome looking badges & tags easily with these classes.
Usage
The mesh badge should be prefixed with the .badge class which will give you access to all of the classes outlined below.
<span> element.
Note: You can have any combination of the classes listed below.
Default
Light
Dark
Black
<span class="badge">Default</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
<span class="badge badge-black">Black</span>
Colored
You can add color classes to brighten up the badges by prefixing it with .badge-{color} class which will give you access to all of the classes outlined below.
Primary
Success
Info
Warning
Danger
Link
<span class="badge badge-primary">Primary</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>
Rounded
You can make badges rounded with the .badge-rounded class.
Primary
Success
Info
Warning
Danger
Link
<span class="badge badge-rounded badge-primary">Primary</span>
<span class="badge badge-rounded badge-success">Success</span>
<span class="badge badge-rounded badge-info">Info</span>
<span class="badge badge-rounded badge-warning">Warning</span>
<span class="badge badge-rounded badge-danger">Danger</span>
Notifications
Mesh badges can be added to buttons as notifications without additional markup.
Notifications
10
<button class="btn btn-primary d-flex align-items-center">
Notifications
<span class="badge badge-light">10</badge>
</button>
Close
To add a closeable button to the badge, simply add badge-close class to enable a hover effect. Then add an icon of your choice, we have stuck with font awesome and add the badge-delete class to the icon.
Primary
Success
Info
Warning
Danger
Link
<span class="badge badge-close badge-primary">
Primary
<i class="badge-delete fas fa-times"></i>
</span>
<span class="badge badge-close badge-success">
Success
<i class="badge-delete fas fa-times"></i>
</span>
<span class="badge badge-close badge-info">
Info
<i class="badge-delete fas fa-times"></i>
</span>
<span class="badge badge-close badge-warning">
Warning
<i class="badge-delete fas fa-times"></i>
</span>
<span class="badge badge-close badge-danger">
Danger
<i class="badge-delete fas fa-times"></i>
</span>
<span class="badge badge-close badge-link">
Link
<i class="badge-delete fas fa-times"></i>
</span>
JS close
To add close functionality to the closeable badges, use the script below. Go ahead and close the tags!
Primary
Success
Info
Warning
Danger
Link
document.addEventListener('DOMContentLoaded', () => {
(document.querySelectorAll('.badge-close .badge-delete') || []).forEach(close => {
close.addEventListener('click', () => {
close.parentNode.remove();
});
});
});
Variables
Choose from different badge options and enable/disable classes you require. Customise the font style & padding of the badges too.
