Example of Default Functional in React Badge Component

All Controls
/
Badge
/
Default

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

More Details...

Loading....
Description

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 example, to increase the size of the badge, increase the font-size, width, and height.

There are 6 different types of badges as follows:

  • Default badge: To get the default badge, add the .e-badge class to the target element.
  • Notification badge: To get the notification badge, add the .e-badge-notification class with .e-badge and change the wrapper element to position: relative property.
  • Circle badge: To get the circle badge, add the .e-badge-circle class with .e-badge.
  • Pill badge: To get the pill badge, add the .e-badge-pill class with .e-badge.
  • Dot badge: To get the dot badge, add the .e-badge-dot class with .e-badge and change the wrapper element to position: relative property.

The badge component supports two positions, and this is applicable only to notification and dot badge.

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