Example of Default Functionalities in Blazor CSS Badge Component
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
This sample demonstrates the default badge functionalities and styling options.
To apply badges, add the .e-badge class to target elements. The Badge component is built with pure CSS and uses em relative units, allowing it to scale proportionally with parent elements and simplifying customization.
Customize badge size by adjusting font-size, width, and height properties. Six badge types are available:
- Default Badge - Add
.e-badgeclass - Notification Badge - Add
.e-badge-notificationwith.e-badgeand set wrapper toposition: relative - Circle Badge - Add
.e-badge-circlewith.e-badge - Pill Badge - Add
.e-badge-pillwith.e-badge - Dot Badge - Add
.e-badge-dotwith.e-badgeand set wrapper toposition: relative
Badge positioning supports two options (applicable to notification and dot badges):
- Top - Default position (no additional class required)
- Bottom - Add
.e-badge-bottomclass