Badges
Badges are often used as unread number indicators.
Notifications
Notifications
Notifications
Notifications
Add the badge
class to non self closing elements.
And add the data-badge
attribute to define the content of a badge.
The badge will appear in the top-right direction of the element.
If there is no data-badge
or the attribute is not specified, the badge will appear as a dot.
Badges support button
and avatars
elements as well.
<span class="badge">
Notifications
</span>
<span class="badge" data-badge="8">
Notifications
</span>
<button class="btn badge" data-badge="8">
Button
</button>
<figure class="avatar badge" data-badge="8" data-initial="YZ">
<img src="img/avatar-3.png" alt="YZ">
</figure>