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 BadgesGive 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 ElementsGive it a TRY! » Note:MDL classes are used to apply pre defined visual enhancements.
Material Design Lite : Classes
|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.|