Avatar
A circular user image with automatic fallback to colored initials when no src is given or the image fails to load.
Initials
JD
AK
RS
MP
<Avatar initials="JD" />
<Avatar initials="AK" />
Sizes
XS
SM
MD
LG
XL
<Avatar initials="SM" width={32} height={32} />
<Avatar initials="LG" width={56} height={56} />
Image with fallback
<Avatar src="https://i.pravatar.cc/150?img=12" initials="JD" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
initials | string | Required. Fallback text shown when there is no image or it fails to load; only the first two characters are used, uppercased. | |
src | string | URI of the network image to display. | |
width | number | 40 | Width of the avatar in pixels. |
height | number | 40 | Height of the avatar in pixels. |
imageProps | Omit<ImageProps, 'source' | 'style'> | Additional props forwarded to the underlying Image. |