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>
Small badge (dot notification)
The position of this badge/notification can be changed using top/bottom/left/right helper clasess.
Some text here with an icon and a small badge
<span class="badge-sm">Text is a notification</span>
Alternative color for small badge:
Info/blue This is a notification
Success/green This is a notification
Warning/dark orange This is a notification
Danger/red This is a notification
<span class="badge badge-sm badge-info">Info</span>
<span class="badge badge-sm badge-success">Success</span>
<span class="badge badge-sm badge-warning">Warning</span>
<span class="badge badge-sm badge-danger">Danger</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>
Autoinvoice
eAccounting
InSchool
Payslip