Example of Blazor CSS Avatar Component with Badge
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
6
12
46
82
99+
6
12
46
82
99+
This sample demonstrates integrating the Avatar component with badges to create notification avatars.
Use badges with avatars to indicate new activities to users. To position the badge correctly, the container must use position: relative. In this sample, the wrapper element is styled with position: relative and contains both the avatar and badge elements.
As a supportive and composable UI element, the Avatar can be used in many contexts and enables a wide variety of use cases.