Flowbite Blazor

Default Avatar #

Use the default avatar component with an image URL.


<Avatar ImageUrl="/images/people/profile-picture-1.jpg" 
        Alt="User profile picture" 
        Rounded="true" />

Avatar with Border #

Add a border style to the avatar using the Bordered parameter.


<Avatar ImageUrl="/images/people/profile-picture-2.jpg" 
        Alt="User with border" 
        Bordered="true" 
        Rounded="true" />

Avatar Placeholder #

Use the default placeholder when no image is provided.


<Avatar Rounded="true" />

Placeholder Initials #

Display initials as a placeholder using the PlaceholderInitials parameter.

JD


<Avatar PlaceholderInitials="JD" Rounded="true" />

Status Indicator #

Show a status indicator using the Status parameter.


<div class="flex flex-wrap gap-2">
    <Avatar ImageUrl="/images/people/profile-picture-3.jpg" 
            Status="online" 
            StatusPosition="bottom-right" 
            Rounded="true" />
    <Avatar ImageUrl="/images/people/profile-picture-4.jpg" 
            Status="busy" 
            StatusPosition="bottom-right" 
            Rounded="true" />
    <Avatar ImageUrl="/images/people/profile-picture-5.jpg" 
            Status="offline" 
            StatusPosition="bottom-right" 
            Rounded="true" />
    <Avatar ImageUrl="/images/people/profile-picture-1.jpg" 
            Status="away" 
            StatusPosition="bottom-right" 
            Rounded="true" />
</div>

Colors #

Change the border color using the Color parameter.


<div class="flex flex-wrap gap-2">
    <Avatar ImageUrl="/images/people/profile-picture-2.jpg" 
            Color="AvatarColor.Gray" 
            Bordered="true" 
            Rounded="true" />
    <Avatar ImageUrl="/images/people/profile-picture-3.jpg" 
            Color="AvatarColor.Success" 
            Bordered="true" 
            Rounded="true" />
    <Avatar ImageUrl="/images/people/profile-picture-4.jpg" 
            Color="AvatarColor.Pink" 
            Bordered="true" 
            Rounded="true" />
    <Avatar ImageUrl="/images/people/profile-picture-5.jpg" 
            Color="AvatarColor.Purple" 
            Bordered="true" 
            Rounded="true" />
</div>

Sizes #

Change the size using the Size parameter.


<div class="flex flex-wrap gap-2 items-center">
    <Avatar ImageUrl="/images/people/profile-picture-1.jpg" 
            Size="AvatarSize.ExtraSmall" 
            Rounded="true" />
    <Avatar ImageUrl="/images/people/profile-picture-2.jpg" 
            Size="AvatarSize.Small" 
            Rounded="true" />
    <Avatar ImageUrl="/images/people/profile-picture-3.jpg" 
            Size="AvatarSize.Medium" 
            Rounded="true" />
    <Avatar ImageUrl="/images/people/profile-picture-4.jpg" 
            Size="AvatarSize.Large" 
            Rounded="true" />
    <Avatar ImageUrl="/images/people/profile-picture-5.jpg" 
            Size="AvatarSize.ExtraLarge" 
            Rounded="true" />
</div>

Avatar with Text #

Display additional content with the avatar using ChildContent.

Jese Leos

Joined in August 2014


<div class="flex items-center space-x-4">
    <Avatar ImageUrl="/images/people/profile-picture-1.jpg" 
            Rounded="true" />
    <div class="font-medium dark:text-white">
        <div>Jese Leos</div>
        <div class="text-sm text-gray-500 dark:text-gray-400">
            Joined in August 2014
        </div>
    </div>
</div>

Avatar Examples