Media
Avatar
A user avatar with deterministic color fallback. Pass a name and optionally a source image: if the image fails to load, initials with a name-derived hue show up instead.
Sizes
Initial fallback
Without an image, each avatar derives a color from the first letter of the name: same letter, same color. Two-character initials are used. A single word produces one initial.
The initials read at 4.5:1 or better on every one of the eight colors, in both themes. The five strong colors are solid behind initials in the ink color, which is near black in the dark theme and near white in the light one. The three soft ones are a quarter tint behind initials in the body text color, so the surface beneath shows through them, and their contrast still holds on every ground the kit draws.
With image
Stacking with AvatarGroup
Use max to cap the number of visible avatars. The rest collapse into a +N badge:
API
| Prop | Type | Default | Description |
|---|---|---|---|
name required | string | no default | Display name. Used for initials and the title attribute. |
src | string | no default | Image URL. Falls back to initials on error. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Avatar size. |
class | string | no default | Extra classes on the wrapper. |
AvatarGroup
| Prop | Type | Default | Description |
|---|---|---|---|
users required | { name: string; src?: string }[] | no default | The people to show, each with a name and an optional image. |
max | number | 4 | How many avatars show before the rest collapse into a +N badge. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'sm' | The size of every avatar in the group. |
class | string | no default | Extra classes on the row. |