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

Example of Notification in ASP.NET MVC Badge Control

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

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

There are 3 type of Notification badge, they are listed below. When using notification badge always apply position: relative to the container element.

  • Default notification - .e-badge-notification applies general notification badge.
  • Circle notification - .e-badge-circle along with .e-badge-notification to apply circle notification badge.
  • Dot notification - .e-badge-dot applied the dot badge to the target element.

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