Material Design Lite – Badges

Material Design Lite – Badges : Material design lite(MDL) provides beautiful badges to display notification. It is basically circle which contains the number or icon. It is also considered as small status descriptor for ui elements. It becomes important when you want to draw user’s attention to display some important message. The most common example can be display the new message notification on the screen. Material design lite provides various pre defined classes which can be used to add beautiful styles, look and feel. Here in this tutorial we are going to explain how you can create badges in material design lite. We Will explain this with example and online demo.

Material Design Lite – Badges Example

Let us create a simple badge in material design –

Badges With Number

Here is an example of badge with number in material design lite –

<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="1">account_box</div>

If you run the above example it will produce the output something like this –

Badges With Icon

Here is an example of badge with icon in material design lite –

<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div>

If you run the above example it will produce the output something like this –

Material Design Lite Badges Options

• mdl-badge(Required)– This Defines the badge as an MDL component.
• mdl-badge–no-background(optional)– Used to Apply open-circle effect on badge.
• mdl-badge–overlap(optional) Used to Make the badge overlap with its container.
• data-badge=”value”– Used to Assign string value to badge.

Badge Icons (On Texts)

If you want to add the badge icons on text or links you can add simply as below –

<span class="mdl-badge" data-badge="4">Inbox</span>

<span class="mdl-badge" data-badge="♥">Likes</span>

If you run the above example it will produce the output something like this –