Avatar
Avatars represent users, teams, or entities throughout the interface. They can display profile images, initials, status indicators, and grouped participants.
Quick Start
Use Avatar with an AvatarImage and AvatarFallback to display a user's profile image.
JD
1import { 2Avatar, 3AvatarFallback, 4AvatarImage, 5} from "@ecos/ui"; 6 7<Avatar> 8 <AvatarImage src="https://i.pravatar.cc/150?img=1" /> 9 <AvatarFallback>JD</AvatarFallback> 10</Avatar>
Avatar Structure
Avatars are built from composable sub-components.
JS
1<Avatar> 2 <AvatarImage src="https://i.pravatar.cc/150?img=1" /> 3 <AvatarFallback>JS</AvatarFallback> 4</Avatar>
Fallback Content
When an image is unavailable, AvatarFallback is displayed instead.
AB
1<Avatar> 2 <AvatarFallback>AB</AvatarFallback> 3</Avatar>
Sizes
Avatar supports predefined size variants for different interface densities.
Small | Default | Large |
|---|---|---|
| JD | JD | JD |
1<Avatar size="sm"> 2 <AvatarFallback>JD</AvatarFallback> 3</Avatar> 4 5<Avatar size="default"> 6 <AvatarFallback>JD</AvatarFallback> 7</Avatar> 8 9<Avatar size="lg"> 10 <AvatarFallback>JD</AvatarFallback> 11</Avatar>
Avatar Groups
AvatarGroup allows multiple participants to be displayed together.
JDABSW
1<AvatarGroup> 2 <Avatar> 3 <AvatarFallback>JD</AvatarFallback> 4 </Avatar> 5 6 <Avatar> 7 <AvatarFallback>AB</AvatarFallback> 8 </Avatar> 9 10 <Avatar> 11 <AvatarFallback>SW</AvatarFallback> 12 </Avatar> 13</AvatarGroup>
Group Counts
AvatarGroupCount can be used when there are more participants than can reasonably be displayed.
JDABSW
+4
1<AvatarGroup> 2 <Avatar> 3 <AvatarFallback>JD</AvatarFallback> 4 </Avatar> 5 6 <Avatar> 7 <AvatarFallback>AB</AvatarFallback> 8 </Avatar> 9 10 <Avatar> 11 <AvatarFallback>SW</AvatarFallback> 12 </Avatar> 13 14 <AvatarGroupCount> 15 +4 16 </AvatarGroupCount> 17</AvatarGroup>
API Reference
Avatar
Property | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "default" | "lg" | "default" | Controls the avatar size. |
| className | string | - | Additional classes applied to the avatar container. |
Avatar Image
Property | Type | Default | Description |
|---|---|---|---|
| src | string | - | Image source URL. |
| alt | string | - | Accessible description of the image. |
| className | string | - | Additional classes applied to the image element. |
Avatar Fallback
Property | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional classes applied to the fallback content. |
Avatar Group
Property | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional classes applied to the avatar group container. |
Avatar Group Count
Property | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional classes applied to the overflow count element. |
Visual Reference
Configuration | Preview |
|---|---|
| Small | JD |
| Default | JD |
| Large | JD |
| Group | JDAB +3 |