Badge

A count on a button or tab, like unread messages. It pops in when there's something new and shrinks away at zero.

Markup

<button class="ob-badge-host" type="button" aria-label="Inbox, 3 unread">
  Inbox <span class="ob-badge" data-visible="true" aria-hidden="true">3</span>
</button>

Notes

Set data-visible to false to take it away. Put the count in the button's accessible name too, because the badge itself is hidden from screen readers.

CSS

@import "obvious/css/components/badge.css";