Badges are small, discrete pieces of information that can be attached to other elements.

Preview

Installation

To import just the component styles, copy the following into your project’s styles.css file:

/* Core Styles */
@import url('https://kherrick.github.io/material-design-lite/css/core.css');
/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
/* Component Styles */
@import url('https://kherrick.github.io/material-design-lite/css/components/badge/style.css');

Usage

Start with a a or div element and add the tooltip class name and data-badge attribute:

<a href="#" class="tooltip" data-badge="1">Link</a>

The data-badge attribute is required and can be any number or string.

If the string is empty, the badge will be displayed as a dot.

Variants

Default

<a href="#" class="badge" data-badge="1">Link</a>

Elevated

<a href="#" class="badge elevated" data-badge="1">Link</a>

Secondary

<a href="#" class="badge secondary" data-badge="1">Link</a>

Tertiary

<a href="#" class="badge tertiary" data-badge="1">Link</a>

Design Tokens