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
					
<span class="badge">+99</span>
<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

Label text Label text Label text Label text
					
<span class="label label-success">Label success</span>
<span class="label label-warning">Label warning</span>
<span class="label label-danger">Label danger</span>
<span class="label label-info">Label info</span>

More examples

Default top navigation

Primary top navigation

Secondary top navigation

List groups

Secondary list groups