Badge is a new feature in user interfaces, and provides users with a visual clue to help them discover additional relevant content. A badge can be both a notifier that there are additional items associated with an object and an indicator of how many items there are.
Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more. Create rounded actionable badges by using .badge-pill class in the <a> tag.
Badge can also be used inside other elements, such as buttons.
Notification Badge also known as Dots notifies the users that there is a pending notification or activity that they have not yet acted upon. Create the notification badge overlapping on an icon using .pmd-badge .pmd-badge-overlap.
You can also create a notification badge which overlaps on a text label.
You can also change the color of the bagde using .pmd-badge-* class.
The Propeller CSS classes apply various predefined visual enhancements to the Badge. The table lists the available classes and their effects.
| Classes | Effect | Remark |
|---|---|---|
.pmd-badge |
Add this class to create notification badge. | Required |
.pmd-badge-overlap |
Add this class to create notification badge which overlaps the element. | Optional |