Avatar: Blazor avatar component

Examples

Images

Image and Alt render a photo; Size picks Small, Medium or Large.

website/Examples/DataDisplay/AvatarImagesExample.razor Source

Initials and icons

Without an image, ChildContent sits on a semantic Color.

website/Examples/DataDisplay/AvatarInitialsExample.razor Source

Group

Wrap avatars in daisyUI's avatar-group to stack them with an overlap.

+12

website/Examples/DataDisplay/AvatarGroupExample.razor Source

Playground

ChildContent

Color Color

Size Size

Image

<Avatar Color="Color.Primary" Size="Size.Large">AS</Avatar>

API

<Avatar>

DaisyBlazor

Parameters

Alt string
= null
Alt text for the image; when null the image is treated as decorative (alt="").
Color Color
= Color.Default
Placeholder background and text color (e.g. bg-primary); ignored when an image is shown.
Image string
= null
Image source; when set the avatar renders an <img>.
Rounded bool
= false
Rounded-box corners (rounded-box) instead of a circle.
Size Size
= Size.Medium
Avatar width: Small is w-8, Medium (default) w-12, Large w-16.
Square bool
= false
Square corners (rounded-none) instead of a circle.
Variant Variant
= Variant.Filled
Placeholder style: Filled (default) colored background, Outlined colored border, Text colored text only.
Class string
= null
Extra CSS classes added to the visible, sized avatar element (e.g. w-24, ring classes); a w-* class replaces the Size width.
Style string
= null
Inline styles applied to the visible, sized avatar element.

Name	Type	Default	Description
Alt	string	null	Alt text for the image; when null the image is treated as decorative (alt="").
Color	Color	Color.Default	Placeholder background and text color (e.g. bg-primary); ignored when an image is shown.
Image	string	null	Image source; when set the avatar renders an <img>.
Rounded	bool	false	Rounded-box corners (rounded-box) instead of a circle.
Size	Size	Size.Medium	Avatar width: Small is w-8, Medium (default) w-12, Large w-16.
Square	bool	false	Square corners (rounded-none) instead of a circle.
Variant	Variant	Variant.Filled	Placeholder style: Filled (default) colored background, Outlined colored border, Text colored text only.
Class	string	null	Extra CSS classes added to the visible, sized avatar element (e.g. w-24, ring classes); a w-* class replaces the Size width.
Style	string	null	Inline styles applied to the visible, sized avatar element.

Content

ChildContent RenderFragment
Initials or icon shown inside the circle when no Image is set.

Name	Type	Description
ChildContent	RenderFragment	Initials or icon shown inside the circle when no Image is set.

From MudAvatar

Avatar keeps MudAvatar's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.