• Material
  • Fabric
  • Bootstrap
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse

Chart

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 - the 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.