Avatar
User avatars
Display user avatars with fallback initials.
Avatar
With image:
Fallback initials
Without image shows initials:
Sizes
Avatar group
Group avatars with overlapping layout:
Avatar stack
Stack avatars with overflow indicator:
+2
Stack sizes
+1
User
Avatar with name and role:
Alice JohnsonEngineer
Without role
Mike Chen
Without avatar
Sarah KimDesigner
Props
Avatar
| prop | type | default | description |
|---|---|---|---|
| src | string | - | Image URL |
| name | string | - | User name |
| size | "sm" | "md" | "lg" | "md" | Avatar size |
Avatar group
| prop | type | default | description |
|---|---|---|---|
| children | ReactNode | - | Avatar elements |
| label | string | - | Accessible label |
Avatar stack
| prop | type | default | description |
|---|---|---|---|
| children | ReactNode | - | Avatar elements |
| max | number | 5 | Max visible avatars |
| size | "sm" | "md" | "lg" | "md" | Wrapper size |
User
| prop | type | default | description |
|---|---|---|---|
| name | string | - | User name |
| avatar | string | - | Image URL |
| role | string | - | User role |