• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Localization
*Translated by Google Translator.
Currency
Essential Studio
HOME
All Controls

Example of Notification in ASP.NET Core Badge Control

This sample demonstrates the types of the notification badge. To apply the notification badge, add .e-badge-notification class or .e-badge-dot class to the dot badge along with .e-badge class.

DEMO
SOURCE
Notification
99+
7
99+
18
Circle
19
27
3
85
Dot

There are 3 types of notification badges and they are listed as follows. When using the notification badge, always apply position: relative to the container element.

  • Default notification: The .e-badge-notification applies general notification badge.
  • Circle notification: The .e-badge-circle with .e-badge-notification applies the circle notification badge.
  • Dot notification: The .e-badge-dot applies the dot badge to the target element.

The position can be changed to the bottom by adding the .e-badge-bottom class.