← Design system
Avatar
Interactive examples and usage for the Avatar component.
Examples
XS
SM
MD
LG
XL
2X
Shapes
CI
SQ
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | Avatar size |
shape | 'circle' | 'square' | 'circle' | Avatar shape |
src | string | undefined | Image source URL |
alt | string | '' | Alt text for the image |
initials | string | undefined | Fallback initials when no image is provided |
status | 'online' | 'offline' | 'busy' | 'away' | undefined | Status indicator dot |