Avatar
A square avatar. Pass image to show a photo; without it (or if the image fails
to load) the component shows initials taken from name ("Ge Yang" → "GY",
"MIT CSAIL" → "MC"), so callers pass the display name rather than
precomputing initials. Color, font, and surface follow the design tokens and
flip with the theme.
Sizes
Five sizes showing how the initials scale up and down with the avatar.
Custom radius
Pass radius (px) to override the simple form's default 3 (rounded square).
Use size / 2 for a perfect circle.
Image
Pass image to render a photo, cropped to fill the avatar and clipped to its
radius. If the URL is missing or fails to load, the avatar falls back to
initials — so name is always required as the fallback.
![Ge Yang](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect width="40" height="40" fill="%232174d9"/><circle cx="20" cy="15" r="7" fill="white"/><rect x="6" y="26" width="28" height="14" rx="7" fill="white"/></svg>)
MCComposed form
You can also compose <AvatarImage> and <AvatarFallback> as children. The
image is hidden until it loads; if it's missing or errors, the fallback
(usually initials) shows instead. This form defaults to a circle — pass
radius to change it.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Display name (simple form). Initials are derived automatically; used as the fallback when image is absent or fails to load. Optional when using the composed form. |
image | string | — | Avatar image URL. Cropped to fill the avatar; falls back to initials on missing/error. |
size | number | 32 / 24 | Avatar size in px. Defaults to 32 for the simple form and 24 for the composed form. The initials scale with the size. |
radius | number | 3 / circle | Border radius in px. The simple form defaults to 3 (rounded square); the composed form defaults to a circle. Use size / 2 for a circle in the simple form. |
className | string | — | Extra classes on the root <span>. |
Composed sub-components
| Component | Props | Description |
|---|---|---|
AvatarImage | native <img> attributes (src, alt, …) | Image inside a composed <Avatar>. Hidden until it loads; on error the sibling <AvatarFallback> takes over. |
AvatarFallback | native <span> attributes | Fallback content (usually initials) shown until the image loads. |