Avatar
ARIA
RTL
The Avatar component is typically used to display images, icons, or initials representing people or other entities.
Default
Variants
md
Sizes
xs
sm
md
lg
xl
2xl
Active status
md
Status origin
Customization
Avatar props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | - | Tailwind classes for customization |
| imageUrl | string | No | - | Path to the image |
| size | xs | sm | md | lg | xl | 2xl | No | md | Size of avatar |
Avatar.Status props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | - | Tailwind classes for customization |
| position | { vertical: 'top' | 'bottom', horizontal: 'left' | 'right' } | No | { vertical: 'bottom', horizontal: 'right' } | Position for status indicator |