Badges are often used as unread number indicators.
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.
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>