import 'package:mdl/mdl.dart';

main() {
    final Logger _logger = new Logger('main.MaterialBadge');
    registerMdl();
    componentFactory().run().then((_) {
        final MaterialBadge badge1 = MaterialBadge.widget(dom.querySelector("#el1"));
        int counter = 1;
        new Timer.periodic(new Duration(milliseconds: 100), (_) {
            if(counter > 999) {
                counter = 1;
            }
            badge1.value = counter.toString();
            _logger.info("Current Badge-Value: ${badge1.value}");
            counter++;
        });
    });
}
To use any MDL component, you must include the minified CSS file in the <head> section of the page:
More about theming...
<div class="demo-preview-block">
    <section class="toolbar">
        <div class="toolbar">
            <div class="wrapper">
                <div id="el1" class="material-icons mdl-badge mdl-js-badge" data-badge="1">print</div>
            </div>
            <div class="wrapper">
                <div id="el2" class="material-icons mdl-badge" data-badge="♥">cloud_upload</div>
            </div>
            <div class="wrapper">
                <div id="el3" class="material-icons mdl-badge" data-badge="99">share</div>
            </div>
        </div>
        <p>
            <strong>Hint:</strong> Check your log and you'll see the values for the first badge...
        </p>
            <section class="icon-icon">
        <style>
            .demo-badge__badge-on-icon-icon .mdl-badge {
                color: rgba(0, 0, 0, 0.24);
            }
            .demo-badge__badge-on-icon-icon .mdl-badge.material-icons {
                font-size: 32px;
            }
        </style>
        <div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div>
        <p>Icon on badge</p>
    </section>
    <section class="icon-text">
        <style>
            .demo-badge__badge-on-icon-text .mdl-badge {
                color: rgba(0, 0, 0, 0.24);
            }
            .demo-badge__badge-on-icon-text .mdl-badge.material-icons {
                font-size: 32px;
            }
        </style>
        <div class="material-icons mdl-badge mdl-badge--overlap" data-badge="1">account_box</div>
        <p>Number badge on icon</p>
    </section>
    <section class="text">
        <h5>Text</h5>
        <span class="mdl-badge" data-badge="42">I am in a span</span>
        <span class="mdl-badge" data-badge="!">Me too</span>
        <div class="mdl-badge" data-badge="99">I am in a div, but that makes no sense here</div>
        <span class="mdl-badge">I have <strong>no</strong> data-badge!</span> <span class="mdl-badge" data-badge="88">But I have one</span>
        <p style="margin-top: 1em">Right margin is set <strong>automatically</strong>, top margin is left to you - it
            depends too much on the situation</p>
    </section>
    <section class="links">
        <h5>Links</h5>
        <a href="#" class="mdl-badge" data-badge="10">Hello</a>
        <a href="#" class="mdl-badge" data-badge="1">Hello</a>
        <a href="#" class="mdl-badge mdl-badge--no-background" data-badge="1">no background</a>
        <div class="dark">
            <a href="#" class="mdl-badge" data-badge="1">Simulate header</a>
            <a href="#" class="mdl-badge mdl-badge--no-background" data-badge="1">no background</a>
        </div>
    </section>
</div>
</section>

Introduction

The Material Design Lite (MDL) badge component is an onscreen notification element. A badge consists of a small circle, typically containing a number or other characters, that appears in proximity to another object. 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.

You can use a badge to unobtrusively draw the user's attention to items they might not otherwise notice, or to emphasize that items may need their attention. For example:

  • A "New messages" notification might be followed by a badge containing the number of unread messages.
  • A "You have unpurchased items in your shopping cart" reminder might include a badge showing the number of items in the cart.
  • A "Join the discussion!" button might have an accompanying badge indicating the number of users currently participating in the discussion.

A badge is almost always positioned near a link so that the user has a convenient way to access the additional information indicated by the badge. However, depending on the intent, the badge itself may or may not be part of the link.

Badges are a new feature in user interfaces, and provide users with a visual clue to help them discover additional relevant content. Their design and use is therefore an important factor in the overall user experience.

Basic use

To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the <head> section of the page, as described in the MDL Introduction.

To include an MDL badge component:

 1. Code an <a> (anchor/link) or a <span> element. Include any desired attributes and content.

<a href="#">This link has a badge.</a>

 2. Add one or more MDL classes, separated by spaces, to the element using the class attribute.

<a href="#" class="mdl-badge">This link has a badge.</a>

 3. Add a data-badge attribute and quoted string value for the badge.

<a href="#" class="mdl-badge" data-badge="5">This link has a badge.</a>

The badge component is ready for use.

Note: Because of the badge component's small size, the data-badge value should typically contain one to three characters. More than three characters will not cause an error, but some characters may fall outside the badge and thus be difficult or impossible to see. The value of the data-badge attribute is centered in the badge.

Examples

A badge inside a link.

<a href="#" class="mdl-badge" data-badge="7">This link contains a badge.</a>

A badge near, but not included in, a link.

<a href="#">This link is followed by a badge.</a>
<span class="mdl-badge" data-badge="12"></span>

A badge inside a link with too many characters to fit inside the badge.

<a href="#" class="mdl-badge" data-badge="123456789">
This badge has too many characters.</a>

A badge inside a link with no badge background color.

<a href="#" class="mdl-badge mdl-badge--no-background" data-badge="123">
This badge has no background color.</a>

Configuration options

The MDL CSS classes apply various predefined visual enhancements to the badge. The table below lists the available classes and their effects.

MDL class Effect Remarks
mdl-badge Defines badge as an MDL component Required on span or link
mdl-badge--no-background Applies open-circle effect to badge Optional
mdl-badge--overlap Make the badge overlap with its container Optional
data-badge="value" Assigns string value to badge Not a class, but a separate attribute; required on span or link