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.
Badge can also be used inside other elements, such as buttons.
You can also create a badge which overlaps any element. Create the notification badge using
Chip component is a small, interactive element. Chip is commonly used for contacts, text, rules, icons, and photos. To create a chip add
.pmd-chip to the tag. To create chip that contain icons, add
.pmd-chip-contact to the tag.
The Propeller CSS classes apply various predefined visual enhancements to the Badge. The table lists the available classes and their effects.
||Add this class to create notification badge.||Optional|
||Add this class to create notification badge which overlaps the element.||Optional|
||Add this class to create chips.||Optional|
||Add this class to create chips with an image/icon.||Optional|