Avatar
A round portrait with initials as the fallback. `name` is required precisely so there is always something to draw when there is no image.
import Avatar from '@/components/ui/Avatar';Source: src/components/ui/Avatar.tsx
Examples
Sizes
Initials, and one name
Two initials from two words, one from a single word. Non-ASCII names work — the initial is taken from the grapheme, not the byte.
Props
<Avatar> props
| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | string | — | — |
src | string | — | — |
size | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | — |
fit | 'cover' | 'contain' | 'cover' | rectangular marks like store logos. |
fallback | 'initials' | 'icon' | 'initials' | The no-photo fallback: 'initials' (default) derives up to two letters from `name` — used for store logos and reviewer avatars, where the letter still identifies the thing. 'icon' shows a generic glyph instead — for the current user's own avatar, where showing their own initials back at them adds nothing. |
className | string | '' | — |
Accessibility
- The initials are text, so they scale and are readable by a screen reader — an image-only avatar with no name would announce nothing.
Related:Icon