# 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 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`.

account_box
Inbox

## Chip

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
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