Badges
The notification indicator consists of a circle with a number inside. We call this a pill or a badge. The notification should only be displayed if there is one or more items. Read more about notifications/badges in the UX Guidelines.
Use when
- You need to attract the user's attention to something that needs to be addressed.
Design
Badges
+99
+99
+99
+99
+99
Labels
Badge text
Badge text
Badge text
Badge text
More examples
Default main navigation
Primary main navigation
Secondary main navigation
List groups
Secondary list groups
<!-- Badges - .badge -->
<span class="badge">+99</span>
<!-- Color versions -->
<span class="badge badge-success">+99</span>
<span class="badge badge-warning">+99</span>
<span class="badge badge-danger">+99</span>
<span class="badge badge-info">+99</span>
<!-- Labels -->
<span class="label label-success">+99</span>
<span class="label label-warning">+99</span>
<span class="label label-danger">+99</span>
<span class="label label-info">+99</span>