Badge

Bootstrap 4 Badge with Material Design UI

Badge is a new UI element. It 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

Warning Info Dark

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
`.pmd-badge-*`	Add this class to create contextual notification badges.	Optional