With Image
ALBOCA
Fallback Only
JDMKZR
Custom Sizes
SMMDLG
Props
| Prop | Type | Description |
|---|---|---|
| className | string | Additional classes on the root element |
| children | ReactNode | Avatar.Image and Avatar.Fallback sub-components |
Sub-components
| Component | Props | Description |
|---|---|---|
| Avatar.Image | src, alt, className | Renders the user photo |
| Avatar.Fallback | children, className | Shown while image loads or when no src is set |
Usage
<Avatar>
<Avatar.Image src="/photo.jpg" alt="Jane Doe" />
<Avatar.Fallback>JD</Avatar.Fallback>
</Avatar>