• Material 3
  • Fluent
  • Fluent 2
  • Bootstrap 5
  • Tailwind CSS
  • High Contrast
  • Fluent 2 High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Theme Mode
Localization
*Translated by Google Translator.
Currency

Example of Default in ASP.NET Core Badge Control

This sample demonstrates the default functionalities of the badge. To apply the badge, add .e-badge class to the target 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 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.
Transform your ASP.NET Core web apps today with Syncfusion ASP.NET Core components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab