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

+99 +99 +99 +99 +99

Sizing

Add .badge-sm for the small version.

+99 +99 +99 +99

More example

Link 99

Adapts to active nav states

Active 42 Normal 3 Normal Disabled 3

Active 3 Normal Normal 42 Disabled 3

Info 3 Success 42 Warning 24 Danger 3

				
<!-- Badges - .badge -->
<span class="badge">+99</span>

<!-- Small version -->
<span class="badge badge-sm">+99</span>

<!-- Color versions -->
<span class="badge badge-info">3</span>
<span class="badge badge-success">42</span>
<span class="badge badge-warning">24</span>
<span class="badge badge-danger">3</span>

<!-- More example section -->
<button class="btn" type="button">
    Button <span class="badge">3</span>
</button>

<div class="nav nav-pills nav-pills-primary">
    <a class="active" href="">
        Active <span class="badge">3</span>
    </a>
    <a href="">
        Normal <span class="badge">42</span>
    </a>
    ...
    <a class="disabled" href="">
        Disabled <span class="badge">3</span>
    </a>
</div>