Avatar
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Default#
PK
Sizes#
Loading…
Status#
Loading…
Group#
Loading…
Custom color#
Avatar derives its initials-fallback background from a name hash by default. Pass color to override the hash with a specific value — useful for per-user brand colors. Image avatars are unaffected (the override only applies to the initials fallback). Invalid colors fall back to the hash; in dev, a console.warn names the offending value.
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | undefined | ? | Display name. Used to derive initials and a deterministic background color. |
| src | string | undefined | — | Image source. Falls back to initials if loading fails. |
| size | enum | md | Predefined size: xs (20) / sm (24) / md (32) / lg (40) / xl (56). |
| status | enum | — | Optional presence indicator. |
| initials | string | undefined | — | Override the auto-generated initials (e.g., for non-Latin scripts). |
| color | string | undefined | — | Override the hash-derived fallback background with a literal CSS color value. Only applies when the initials fallback is shown; image avatars are unaffected. |