Avatar
Overview
Section titled “Overview”Avatar is an image element with a fallback for representing the user. The Image part
renders only once it has loaded, staying hidden while loading or on error so the
Fallback can show instead; a fallback delay (DelayMs) avoids a flash on fast
connections. Every loading transition is surfaced through OnLoadingStatusChange.
Anatomy
Section titled “Anatomy”@using Navius.Primitives.Components.Avatar
<NaviusAvatar> <NaviusAvatarImage /> <NaviusAvatarFallback /></NaviusAvatar>Contains all the parts of an avatar. Cascades an AvatarContext to the parts. Renders
a span.
| Prop | Type | Default | Description |
|---|---|---|---|
ChildContent |
RenderFragment? |
- | The Image and Fallback. |
Attributes |
IDictionary<string, object>? |
- | Forwarded to the rendered span. |
The image to render. By default it only renders once it has loaded; while loading and
on error it is hidden so the fallback can show. Renders an img.
| Prop | Type | Default | Description |
|---|---|---|---|
Src |
string? |
- | The image source. Reassigning it re-enters the loading phase. |
OnLoadingStatusChange |
EventCallback<string> |
- | Fires on every loading-status transition: "idle", "loading", "loaded", "error". |
Attributes |
IDictionary<string, object>? |
- | Forwarded to the rendered img. |
Fallback
Section titled “Fallback”An element that renders when the image has not loaded, meaning while it is loading or
on error. Renders a span.
| Prop | Type | Default | Description |
|---|---|---|---|
DelayMs |
int |
0 |
Delays rendering the fallback by this many milliseconds, to avoid a flash while the image is likely to load quickly. |
ChildContent |
RenderFragment? |
- | Fallback content. |
Attributes |
IDictionary<string, object>? |
- | Forwarded to the rendered span. |
Data attributes
Section titled “Data attributes”| Part | Attribute | Description |
|---|---|---|
| Image | data-navius-avatar-image |
Present on the image. |
| Fallback | data-navius-avatar-fallback |
Present on the fallback. |
ARIA mechanism
Section titled “ARIA mechanism”Avatar is presentational and not focusable, so it exposes no keyboard interactions or
ARIA role of its own. The Image part renders a native img, so pass an alt
describing the user; the Fallback’s rendered content is read in its place when no
image has loaded, since the Image is removed from the accessibility tree (not merely
hidden) whenever it is not in the loaded state. This mechanism is covered by the
Playwright browser test suite and gated by axe-core in CI.