81

Materialize CSS Badges

Materialize CSS Badges are used to notify you that there are new or unread messages or notifications. You can add the new class to the badge to give it the background. Badges can be a number or an icon. It is generally used to emphasize the number of items.

See the following two classes used in Materialize CSS badges:

Index	Class name	Description
1)	badge	It is used to identify an element as an mdl badge component. It is required for span element.
2)	new	It is used to add a “new” class to a badge component gives it a background.

---

Example

Let’s take an example to demonstrate the usage of badges in different ways:

Test it Now

Output: