Example of Blazor CSS Badge Component as Notification
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.
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-notificationapplies general notification badge. - Circle notification: The
.e-badge-circlewith .e-badge-notification applies the circle notification badge. - Dot notification: The
.e-badge-dotapplies the dot badge to the target element.
The position can be changed to the bottom by adding the .e-badge-bottom class.