--- layout: page title: Badges --- Badges are indicators for new or unread activity and include support for the active states of our [navigation components](/components/navs/), links, buttons, and more. {% example html %} Inbox 42 {% endexample %} ### Self collapsing When there are no new or unread items, badges will simply collapse (via CSS's `:empty` selector) provided no content exists within. ### Active nav Built-in styles are included for placing badges in active states in pill navigations. {% example html %} {% endexample %} ### Buttons Like active nav links, badges in Bootstrap buttons automatically restyle to better blend into the background. {% example html %} {% endexample %}