Display
Avatar
A person, as a circle, with initials until the image lands.
Examples
sizes
Notes
A person, as a circle.
Wraps Radix so the fallback appears only after the image has actually failed or is still loading — a hand-rolled onError swap flashes the initials on every render before the cache answers.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| altrequired | string | Describes the person, not the picture. Empty string is correct and deliberate when the name is already printed beside the avatar — repeating it makes a screen reader say it twice. | |
| fallbackrequired | string | Shown while the image loads and if it never does. Usually initials. | |
| size | 'sm' | 'md' | 'lg' | 'md' | — |
| src | string | — |
Also accepts everything in Omit<ComponentProps<typeof AvatarPrimitive.Root>, 'children'>. Those are forwarded to the underlying element and are not listed row by row.
Accessibility
- alt describes the person, not the picture. An empty string is correct when the name is already printed beside it.
- The initials are aria-hidden — read aloud they are noise.