Spectre CSS

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.

YZ
YZ
YZ

Badges support button and avatars elements as well.

html
<!-- text + dot -->
<span class="badge">
  Notifications
</span>

<!-- text + number -->
<span class="badge" data-badge="8">
  Notifications
</span>

<!-- button + number -->
<button class="btn badge" data-badge="8">
  Button
</button>

<!-- image figure + number -->
<figure class="avatar badge" data-badge="8" data-initial="YZ">
  <img src="/img/avatar-3.png" alt="YZ">
</figure>