Badges
Badges inform users about the status of an object or the outcome of an action. They are read-only indicators that display a status or count. They aren’t interactive, so you can’t click on them.
Use when:
- You need to attract the user's attention to something that needs to be addressed.
Design
Notification badge number
+99
+99
+99
+99
+99
+99
Notification badge dot
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
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
Label badge
Label text
Label text
Label text
Label text
Label text
More examples
Default top navigation
Primary top navigation
Secondary top navigation