Example of Blazor CSS Avatar Component with Badge

Avatar / Integration / Badge

This sample demonstrates the integration of avatar component with badges to create notification avatars.

Loading Syncfusion Blazor Server Demos…

User avatar picture
6
User avatar picture
12
User avatar picture
46
User avatar picture
82
User avatar picture
99+
User avatar picture
6
User avatar picture
12
User avatar picture
46
User avatar picture
82
User avatar picture
99+

The avatar can be used with badges to indicate the new activities to users. The container needs position: relative property to achieve the notifications styled avatar. In this sample, the wrapper is applied with position: relative property with avatar and badge elements inside it.

Since the avatar is a supportive and dependent component, it can be used in many ways and have wide variety of use-cases.

Transform your Blazor web apps today with Syncfusion® Blazor components
145+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE