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 Badge

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.

1 2 4 6 8 10

Notification Badge

You can also create a badge which overlaps any element. Create the notification badge using .pmd-badge .pmd-badge-overlap.



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.

Example Chip close
avatar Trevor Hensen close

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. Optional
.pmd-badge-overlap Add this class to create notification badge which overlaps the element. Optional
.pmd-chip Add this class to create chips. Optional
.pmd-chip-contact Add this class to create chips with an image/icon. Optional