Static WebAssembly demo on GitHub Pages. Everything runs in your browser; server-only features use labeled stand-ins. Run locally for the full Blazor Server experience.

ComponentsData display

Avatar and avatar group

MudAvatar represents a person or an entity with a picture, initials or an icon. MudAvatarGroup stacks several and summarizes the overflow, for crews, reviewers and participants.

Pictures, initials and icons

An avatar holds an image, a short text or an icon. Pair it with a visible name; when the name is right there, the picture is decoration.

Inês Albuquerque

Picture

Tomás Okafor

Initials

Scheduler

Icon for a system account

Guest

Placeholder

Every variant and color

Variant × Color, rendered from the enums. Filled is the default and Outlined draws a ring in the color. In MudBlazor 9.11 the Text variant has no color styles, so it falls back to the neutral avatar: prefer Filled or Outlined.

MudAvatar: Variant × Color
Variant ↓ · Color →DefaultPrimarySecondaryTertiaryInfoSuccessWarningErrorDarkTransparentInheritSurface
Text
MK
MK
MK
MK
MK
MK
MK
MK
MK
MK
MK
MK
Filled
MK
MK
MK
MK
MK
MK
MK
MK
MK
MK
MK
MK
Outlined
MK
MK
MK
MK
MK
MK
MK
MK
MK
MK
MK
MK

Sizes and shapes

Three sizes, each as a circle, with the theme's rounded corners and square. Elevation lifts an avatar off busy backgrounds.

MudAvatar: Size × shape
Size ↓ · Shape → Circle (default) Rounded Square Elevation 3
Small
RB
RB
RB
RB
Medium
RB
RB
RB
RB
Large
RB
RB
RB
RB

Groups and overflow

Max limits how many avatars show; the rest collapse into a +N avatar styled by the Max* parameters. Spacing sets the overlap, Outlined separates neighbors.

Tonight's volunteers (8)

Inês Albuquerque
Tomás Okafor
Mei Lin
Rafael Duarte
+4

Max: 4

Spacing: 3

A custom overflow avatar

MaxAvatarsTemplate replaces the +N avatar. Here it names the hidden people in a tooltip and stays reachable by keyboard.

reviewed the grant proposal

A crew roster

Avatars in context: who is on shift at the observatory, with status that is spelled out rather than shown by color alone.

Northern dome · Friday night

Inês Albuquerque

Duty astronomer
On shift

Tomás Okafor

Telescope operator
On shift

Mei Lin

Public outreach
Off tonight

Rafael Duarte

Instrument technician
On shift

Playground

Change any parameter; the markup below updates with only the values that differ from the defaults.

SB
Content
Initials
Variant
Color
Size
Elevation
<MudAvatar Color="Color.Secondary" Size="Size.Large">SB</MudAvatar>

Starting .NET in your browser…