Default Group

Three avatars displayed in a stacked row.

A
B
C

With Max Limit

Shows 3 avatars and a +2 overflow indicator for hidden members.

A
B
C
D
E

Small Size (32px)

Compact avatar group for tight UI spaces like table cells.

A
B
C

Large Size (48px)

Larger avatars for profile headers or team sections.

A
B
C

Team Members

Show a project team with overflow for large groups.

J
C
A
B
C
D
E

In Card Context

Avatar group inside a card alongside project info.

Project FLIN
5 contributors
J
C
A
B
E

Usage

<AvatarGroup> <Avatar name="Alice" /> <Avatar name="Bob" /> <Avatar name="Carol" /></AvatarGroup><AvatarGroup max="3" size="32"> <Avatar name="Alice" /> <Avatar name="Bob" /> <Avatar name="Carol" /> <Avatar name="Dan" /></AvatarGroup>

Props

PropTypeDefaultDescription
maxtext"5"Maximum avatars to show before overflow indicator
sizetext"40"Avatar diameter in pixels
childrencontent-Avatar components to group