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