Example of Default in ASP.NET MVC Badge Control

This sample demonstrates the default functionalities of the badge. To apply the badge, add .e-badge class to the element.

DEMO

SOURCE

The Badge is a component which is developed in pure CSS and designed in em relative units, so that badge will always be in relevant to the parent and makes the badge super easy to customize.

For Ex to increase the size of the badge, just increase the font-size the width and height will be adjusted.

There are 6 different types of badge. they are explained below.

Default badge - To get the default badge, add .e-badge class to the element.
Notification badge - To get the notification badge, add .e-badge-notification along with .e-badge and also make the wrapper element position: relative.
Circle badge - To get the circle badge, add the .e-badge-circle class along with .e-badge.
Pill Badge - To get the pill badge, add the .e-badge-pill class along with .e-badge.
Dot badge - To get the dot badge, add the .e-badge-dot class along with .e-badge and also make the wrapper element position: relative.

The badge component supports two position. This is applicable only to Notification and dot badge.

Top - It is the default position, so there is no additional class needed for top position.
Bottom - To get the bottom badge, add .e-.badge-bottom class along with .e-badge.