Material Design Lite - Badges

An MDL badge component is an onscreen notification which can be a number or an icon. It is generally used to emphasize the number of items.

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements to the badges. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-badge

Identifies element as an MDL badge component. Required for span or link element.
2

mdl-badge--no-background

Applies open-circle effect to badge and is optional.
3

mdl-badge--overlap

Makes the badge overlap with its container and is optional.
4

data-badge="value"

Assigns a string value to badge used as attribute; required on span or link.

Example

The following example will help you understand the use of the mdl-badge class to add notifications to span and link elements.

The MDL classes given below will be used in this example.

  • mdl-badge − Identifies element as an MDL badge component.

  • data-badge − Assigns a string value to badge. Icons can be assigned to it using HTML symbols.

mdl_badges.htm

Live Demo 
<html>
   <head>
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         body {
            padding: 20px;
            background: #fafafa;
            position: relative;
         }
      </style>
   </head>
   
   <body>
      <span class = "material-icons mdl-badge" data-badge = "1">account_box</span>    
      <span class = "material-icons mdl-badge" data-badge = "★">account_box</span>	
      <span class = "mdl-badge" data-badge = "4">Unread Messages</span>
      <span class = "mdl-badge" data-badge = "⚑">Rating</span>
      <a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
   </body>
</html>

Result

Verify the result.

Advertisements