Elements

AvatarGroup

A stack of overlapping avatars with overflow collapsing into a "+N" indicator.

html

<UiAvatarGroup :avatars="..." />

Avatars

required

avatars is the list to stack, each rendered as an Avatar and overlapping the one before it in order. Every prop an individual Avatar takes — src, firstName, status — can be set per entry.

Shape

shape is the shape applied to every Avatar in the group.

Max

max caps how many avatars are drawn. Everything past it collapses into a single “+N” indicator at the end of the stack, so a group of forty still reads at a glance.

Avatars beyond max collapse into a single "+N" indicator rather than being hidden outright.

Ring

ring is the background color the separation ring blends into. Match it to the surface the group sits on — a Card's background rather than the page's — so the rings read as cutouts between avatars instead of visible outlines.

Match ring to the surface the group sits on, same as Badge and Avatar.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop

Type

Default

Description

avatarsrequired

AvatarGroupItem[]

—

The avatars to display, stacked with overlap in order.

shape

"circle" | "square"

'circle'

The shape applied to every Avatar in the group.

max

number

—

The maximum number of avatars to display before collapsing the rest into a "+N" indicator.

ring

"background" | "foreground" | "elevated" | "highlighted"

'background'

The background color the separation ring blends into. Match this to the surface the group is placed on (e.g. a Card's background) so the ring reads as a seamless cutout rather than a visible border.

Types

interface AvatarGroupItem {
    src?: string;
    firstName?: string;
    lastName?: string;
}