ComponentsDisplayAvatar

Avatar

User profile images with fallback initials, status indicators and group stacking.

6 sizesCircle & squareStatus indicatorAvatarGroupFallback initials

Sizes

Live preview

6 sizes from xs to 2xl — fallback to initials when no image is provided

App.tsx

tsx

1import { Avatar } from 'omverse-ui'
2 
3<Avatar name="John Doe" size="xs" />
4<Avatar name="John Doe" size="sm" />
5<Avatar name="John Doe" size="md" />
6<Avatar name="John Doe" size="lg" />
7<Avatar name="John Doe" size="xl" />
8<Avatar name="John Doe" size="2xl" />

All sizes with image

Live preview

Same 6 sizes with a real image src

App.tsx

tsx

1<Avatar src="https://i.pravatar.cc/150?img=1" name="John" size="xs" />
2<Avatar src="https://i.pravatar.cc/150?img=1" name="John" size="sm" />
3<Avatar src="https://i.pravatar.cc/150?img=1" name="John" size="md" />
4<Avatar src="https://i.pravatar.cc/150?img=1" name="John" size="lg" />
5<Avatar src="https://i.pravatar.cc/150?img=1" name="John" size="xl" />
6<Avatar src="https://i.pravatar.cc/150?img=1" name="John" size="2xl" />

With image

Live preview

Automatically falls back to initials if the image fails to load

App.tsx

tsx

1<Avatar src="https://i.pravatar.cc/150?img=1" name="John Doe" size="md" />
2<Avatar src="https://i.pravatar.cc/150?img=5" name="Jane Smith" size="md" />
3<Avatar src="https://i.pravatar.cc/150?img=3" name="Bob Lee" size="md" />

Fallback initials

Live preview

Generates initials from the name prop — JD, AW, BL, SC

App.tsx

tsx

1<Avatar name="John Doe" size="md" />
2<Avatar name="Alice Wang" size="md" />
3<Avatar name="Bob Lee" size="md" />
4<Avatar name="Sarah Connor" size="md" />

Shape

Live preview

Circle (default) or square with size-appropriate border radius

App.tsx

tsx

1<Avatar name="John Doe" size="md" shape="circle" />
2<Avatar name="John Doe" size="md" shape="square" />

Square shape

Live preview

Square shape across sizes — works with initials and images

App.tsx

tsx

1<Avatar name="John Doe" size="sm" shape="square" />
2<Avatar name="John Doe" size="md" shape="square" />
3<Avatar name="John Doe" size="lg" shape="square" />
4<Avatar src="https://i.pravatar.cc/150?img=1" name="John" size="lg" shape="square" />

Status indicators

Live preview

Online (green), offline (gray), away (amber) and busy (red)

App.tsx

tsx

1<Avatar name="John Doe" size="md" status="online" />
2<Avatar name="John Doe" size="md" status="offline" />
3<Avatar name="John Doe" size="md" status="away" />
4<Avatar name="John Doe" size="md" status="busy" />

All status indicators

Live preview

Status dots at lg size for better visibility

App.tsx

tsx

1<Avatar name="John" size="lg" status="online" />
2<Avatar name="Jane" size="lg" status="offline" />
3<Avatar name="Bob" size="lg" status="away" />
4<Avatar name="Alice" size="lg" status="busy" />

Avatar group

Live preview

Stacks avatars with overlap — extras beyond max collapse into a count badge

App.tsx

tsx

1import { Avatar, AvatarGroup } from 'omverse-ui'
2 
3<AvatarGroup max={3}>
4  <Avatar src="https://i.pravatar.cc/150?img=1" name="John" />
5  <Avatar src="https://i.pravatar.cc/150?img=2" name="Jane" />
6  <Avatar src="https://i.pravatar.cc/150?img=3" name="Bob" />
7  <Avatar src="https://i.pravatar.cc/150?img=4" name="Alice" />
8  <Avatar src="https://i.pravatar.cc/150?img=5" name="Tom" />
9</AvatarGroup>

Avatar group sizes

Live preview

Group size prop is passed to all child avatars

App.tsx

tsx

1<AvatarGroup max={4} size="sm">
<Avatar src="https://i.pravatar.cc/150?img=1" name="John" />
<Avatar src="https://i.pravatar.cc/150?img=2" name="Jane" />
<Avatar src="https://i.pravatar.cc/150?img=3" name="Bob" />
<Avatar src="https://i.pravatar.cc/150?img=4" name="Alice" />
<Avatar src="https://i.pravatar.cc/150?img=5" name="Tom" />
7</AvatarGroup>
8<AvatarGroup max={4} size="md">
<Avatar src="https://i.pravatar.cc/150?img=1" name="John" />
<Avatar src="https://i.pravatar.cc/150?img=2" name="Jane" />
<Avatar src="https://i.pravatar.cc/150?img=3" name="Bob" />
<Avatar src="https://i.pravatar.cc/150?img=4" name="Alice" />
<Avatar src="https://i.pravatar.cc/150?img=5" name="Tom" />
14</AvatarGroup>

Props

PropTypeDefaultDescription

namestring—Used for fallback initials and aria-label

srcstringundefinedImage URL — falls back to initials on error

size'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl''md'Avatar size

shape'circle' | 'square''circle'Avatar shape

status'online' | 'offline' | 'away' | 'busy'undefinedStatus indicator dot

clickablebooleanfalseAdds hover/focus styles and role="button"