Avatar
A round avatar from an image, initials, or a fallback icon. Initials use grapheme segmentation, and a broken image falls back to initials.
Examples
Initials
ALALAL
Show code
<Avatar name="Ada Lovelace" />Image
Show code
<Avatar name="Ada Lovelace" src="https://i.pravatar.cc/150?img=5" />Fallback icon
Show code
<Avatar />Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image URL. Falls back to initials (or an icon) if it fails to load. |
name | string | — | The person's name — used for initials and the accessible label. |
size | "sm" | "md" | "lg" | "md" | Diameter: 2rem, 2.5rem, 3.5rem. |
Initials come from the first grapheme of the first and last words, so emoji and accented names survive. Any other attribute is spread onto the root.