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

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