Search within TutorialsPark

MDL : Badges


How to use Material Design Lite Badges within your Document.


Material Design Lite (MDL) : Badges

Material Design Lite(MDL) component badge is used to create an onscreen notification element.

A Badge is essentially a small sized circle containing a number or other types of symbols/characters,used as a notifier or display the number of items within.

The purpose of a badge is to draw user attention towards any new event or emphasis important data. Eg: New Email, Shopping Cart Items , Friend Requests etc.

Badges are always positioned near the associated object such that the user can access the information easily, creating a better user esperience.


Material Design Lite (MDL) Badges : Creating a Badges

A Badge is created by using one or multiple MDL classes seperated by space using attribute class, "mdl-badge" being the most basic.

The value of the badge is specified using the attribute data-badge="value"

Example: Material Design Lite (MDL) Creating Badges

Give it a TRY! » Note: The class material icons is used to insert MDL material Icons with the Document.


Material Design Lite : Badges on Link Elements

To attach a badge within a link, use the anchor element <a> along with class mdl-badge

The demo below has a badge within a link, outside the link , badge within a link with no background color.

Example: Material Design Lite (MDL) Badges on Link Elements

Give it a TRY! » Note:MDL classes are used to apply pre defined visual enhancements.


Material Design Lite : Classes

MDL Class Description
mdl-badge To Define a MDL Component Badge, is required
mdl-badge--no-background To create a transparent open circle effect on badge, its optional.
mdl-badge--overlap To create a badge that overlap with its container, its optional
data-badge="value" To assign a value of the badge.