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

21Cras justo odio

9Cras justo odio 4Disabled list item Morbi leo risus1 1.971,51 SEKSelected list item Vestibulum at eros473,00 SEK

5.671,00 SEK Vestibulum maximus

Secondary list groups

21Cras justo odio

9Cras justo odio 4Disabled list item Morbi leo risus1 1.971,51 SEKSelected list item Vestibulum at eros473,00 SEK

5.671,00 SEK Vestibulum maximus

				
<!-- 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>