Components / Data Display
Avatar
stableRepresents a person or account — a photo when there is one, initials when there isn’t, a generic icon when there’s neither.
Fallback states
AL
Sizes
ALALAL
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
src | string | — | No | Image URL. Falls back to initials, then a generic icon, if absent. |
name | string | — | No | Full name — used for initials and the image alt text. |
size | 'sm' | 'md' | 'lg' | 'md' | No | Diameter of the avatar. |
Do
- Fall back to initials before falling back to a generic icon — initials are more identifiable at a glance.
- Keep sizing consistent within one context (e.g. every row in a table uses the same size).
Don't
- Stretch a non-square source image instead of cropping it.
- Use an avatar for a non-person entity (a product, a company) — use a logo container instead.