Avatar
An image element with a fallback for representing the user
SSR mode
Examples
With image
With fallback only
RH
Fallback after image error
Sizes
Large
Overlapped
Interactive (hover to spread)
Click target
Clicked 0 times
Menu trigger
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Avatar | Circular container that cascades itself to AvatarImage and AvatarFallback so they can coordinate on image load state. Size via ClassName with a Tailwind size-* utility. |
| AvatarImage | Renders an <img> inside the parent Avatar. Hides itself and flips the parent to the errored state if the image fails to load so AvatarFallback can take over. |
| AvatarFallback | Text or icon shown when AvatarImage has no Src or its load errored. Rendered centred with a muted background. |
Avatar
Circular container that cascades itself to AvatarImage and AvatarFallback so they can coordinate on image load state. Size via ClassName with a Tailwind size-* utility.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the avatar wrapper. Use size-* here to resize. | |
| ChildContent | RenderFragment? | Usually AvatarImage + AvatarFallback. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the avatar wrapper. |
AvatarImage
Renders an <img> inside the parent Avatar. Hides itself and flips the parent to the errored state if the image fails to load so AvatarFallback can take over.
| Property | Type | Required | Description |
|---|---|---|---|
| Src | string? | Image URL. When null or empty, the component renders nothing and the fallback is shown. | |
| Alt | string? | Alt text forwarded to the underlying <img>. | |
| ClassName | string? | Extra CSS classes appended to the <img>. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the <img>. |
AvatarFallback
Text or icon shown when AvatarImage has no Src or its load errored. Rendered centred with a muted background.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the fallback span. | |
| ChildContent | RenderFragment? | Usually initials or a placeholder icon. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the fallback span. |