Avatar
User or entity avatar: image, initials, or icon, in 4 sizes.
SO
Sizes
SOSOSOSO
Group
AKCDFM+1
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Avatar diameter. |
| src | string | Image URL, renders an image avatar. | |
| initials | string | 1–2 letters, renders when no src is given. | |
| icon | ReactNode | Custom icon, used when neither src nor initials are given. |
Why it works this way
Why
- The type is inferred from props: src gives an image, initials gives initials, otherwise an icon. There is no type prop to keep in sync.
- Image avatars get a 1px subtle ring, so photos with light edges don't bleed into the surface.
Don't
- Don't default to initials when you have a real photo. Initials are the fallback.
- Don't leave alt empty on a meaningful image. It is how the person is identified to assistive tech.