Avatars
User profile images with fallback support
Sizes
SMMDLG
<Avatar size="sm">
<Avatar.Image src="/user.jpg" alt="User" />
<Avatar.Fallback>SM</Avatar.Fallback>
</Avatar>
<Avatar size="md">
<Avatar.Image src="/user.jpg" alt="User" />
<Avatar.Fallback>MD</Avatar.Fallback>
</Avatar>
<Avatar size="lg">
<Avatar.Image src="/user.jpg" alt="User" />
<Avatar.Fallback>LG</Avatar.Fallback>
</Avatar>Fallbacks with Colors
When no image is available, fallbacks display initials with colored backgrounds.
DFACSUWADA
<Avatar color="default">
<Avatar.Fallback>DF</Avatar.Fallback>
</Avatar>
<Avatar color="accent">
<Avatar.Fallback>AC</Avatar.Fallback>
</Avatar>
<Avatar color="success">
<Avatar.Fallback>SU</Avatar.Fallback>
</Avatar>Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Avatar size |
color | 'default' | 'accent' | 'success' | 'warning' | 'danger' | 'default' | Fallback background color |