Avatar
Image with graceful fallback.
Usage
Compose Avatar.Root, Avatar.Image, and Avatar.Fallback together. The fallback renders automatically when the
image is absent or fails to load.
JD
Sizes
Three sizes via the size prop on Avatar.Root.
SM
MD
LG
Shapes
circle (default) or square via the shape prop.
CR
SQ
Fallback
Avatar.Fallback renders when no image is provided or when the image
fails to load. Typically used with initials.
RA
PF
Props
Avatar.Root
| Prop | Type | Default |
|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' |
shape | 'circle' | 'square' | 'circle' |
class Extra classes merged onto the root. | string | — |
children Avatar.Image and/or Avatar.Fallback. | Snippet | — |
Avatar.Image
| Prop | Type | Default |
|---|---|---|
src Image URL. | string | — |
alt Required. Describes the image for screen readers. | string | — |
class Extra classes. | string | — |
Avatar.Fallback
| Prop | Type | Default |
|---|---|---|
class Extra classes. | string | — |
children Fallback content, typically initials. | Snippet | — |