Badge

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.

Bootstrap 4 Badge

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap 4 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.

1 2 3 4 5 6 7 8

                            

Icon with Notification Badge

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.

account_box

                            

Notification Badge on Text

You can also create a notification badge which overlaps on a text label.

Inbox

                            

Contextual Notification Badges

You can also change the color of the bagde using .pmd-badge-* class.

account_box
Inbox

								

Configuration Options

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