BlazorUI Demo

Icons, badges and avatars

Compact identity, state and icon primitives.

Icons and badges
Approved Design Pending
View code 
<BuiStack Orientation="Orientation.Horizontal" Align="Align.Center" Gap="3" Wrap>
    <BuiIcon Icon="LucideIcons.Sparkles" Color="Colors.Primary" />
    <BuiBadge StartIcon="LucideIcons.Check" Color="Colors.Success">Approved</BuiBadge>
    <BuiBadge Color="Palette.Violet" Variant="Variant.Outlined">Design</BuiBadge>
    <BuiBadge Color="Colors.Warning" Tone="Tone.Strong">Pending</BuiBadge>
</BuiStack>
Avatar fallbacks

Images fall back to explicit initials, generated initials, an icon, or custom content.

View code 
<BuiStack Orientation="Orientation.Horizontal" Align="Align.Center" Gap="3" Wrap>
    <BuiAvatar Name="Ada Lovelace" Color="Palette.Teal" />
    <BuiAvatar Initials="UI" Color="Palette.Violet" Size="Size.Large" />
    <BuiAvatar Icon="LucideIcons.User" Circular="false" />
</BuiStack>