Avatar Group
Stacked avatar list with automatic overlap masking. Optional max limit shows the remainder count as a hover-card with the full list.
Default
Pass items array of objects with at least a name.
OM
JL
IN
SD
With max
max truncates and adds a +N overflow with a hover card listing the rest.
OM
JL
IN
SD
Sizes
size accepts a rem value.
OM
JL
IN
OM
JL
IN
OM
JL
IN
Overlap
overlap controls how tightly avatars stack (fraction of size). 0.2, default 0.2, then 0.5.
OM
JL
IN
SD
OM
JL
IN
SD
OM
JL
IN
SD
Colorful
colorful toggles the auto mesh-gradient initials background. Set false for a neutral fill.
OM
JL
IN
SD
OM
JL
IN
SD
Tooltip
Names show on hover by default. Set :show-tooltip="false" to disable.
OM
JL
IN
SD
OM
JL
IN
SD
API Reference
Props, events, and slots for each sub-component.
AvatarGroup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id?, name?, profile_image? }[] | [] | List of avatar models. |
| size | number | 2.5 | Avatar diameter in rem. |
| overlap | number | 0.2 | Fraction of size each avatar overlaps. |
| gap | number | 2 | Gap between mask cutouts in pixels. |
| max | number | — | Max avatars to show. Rest collapse into +N. |
| firstOnTop | boolean | true | Stack first item above others. Set false to invert. |
| colorful | boolean | true | Forward to child Avatars. |
| showTooltip | boolean | true | Show name tooltips on hover. |
| label | string | — | aria-label override for the group. |
Slots
| Slot | Description |
|---|---|
| overflow | Custom slot for the +N indicator. Receives { count, hiddenItems }. |