AvatarGroup

Implemented

Stacked avatar list — up to max (default 3) initial circles overlapping by -8px, remaining members collapsed into a "+N" overflow chip. The wrapper is a single role="img" with one accessible description. Used for attendees, collaborators, team members.

Categorymolecules

Sourcepatterns/molecules/avatargroup.html

AI HintStacked initials cluster for attendees/collaborators. Pass a localized `label` for the accessible description; overflow renders a '+N' chip. Renders its own circles — does not compose the Avatar atom (no image support).

Stacked avatar list with overflow count.

AvatarGroup

molecules

Renders a horizontal stack of overlapping initial avatars. Members beyond `max` collapse into a "+N" overflow chip. Used for attendees, collaborators, and team members.

AMPDSL+6JBMCT1T2T3+1

Usage

AvatarGroup is a compact representation of a user set. The default max of 3 keeps the control visually balanced; raise it for explicit team rosters where every member matters.

import { AvatarGroup } from '@epasslive/design-system'

<AvatarGroup
  initials={['AM', 'PD', 'SL']}
  total={9}
  label="9 attendees going"
/>

Props

Prop

Type

Default

Description

initials*

string[]

—

Initials for each member (1-2 chars), rendered as Avatar-style circles.

max

number

3

Avatars shown before collapsing.

total

number

—

Total member count — when larger than initials.length, the "+N" chip renders.

overflowLabel

string

—

Overrides the computed overflow label (e.g. "+9").

label

string

—

Accessible description of the group (defaults to "N members").

size

'sm' | 'md' | 'lg'

'md'

Avatar diameter.

className

string

—

Additional CSS classes.

Accessibility

Wrapper exposes role="img" with the group label (defaults to "N members").
Individual initials and the "+N" chip are decorative — the group label is the single accessible description.

Props

Preview

AvatarGroup

Prop

Type

Required

Default

Description

initials

string[]

Required

—

Initials for each member (1-2 chars), rendered as Avatar-style circles.

overflowLabel

string

Optional

—

Overrides the computed overflow chip label (default '+N').

total

number

Optional

—

Total member count — when larger than initials.length, '+N' renders.

max

number

Optional

3

Max avatars shown before collapsing to +N.

label

string

Optional

—

Accessible description of the group (default '{N} members' — pass a localized label).

size

"sm" | "md" | "lg"

Optional

'md'

Circle size preset: sm 24px / md 32px / lg 40px.

className

string

Optional

—

Additional CSS classes on the group container.

Quick use:<AvatarGroup />

Accessibility

ARIA roleimg

Usage

Import

tsxSnippet

import { AvatarGroup } from "@epasslive/design-system"

Example 1

tsxSnippet

<AvatarGroup initials={['AM','PD','SL']} total={9} label='9 attendees going' />

Example 2

tsxSnippet

<AvatarGroup initials={['JD','KB']} size='sm' overflowLabel='+2 more' />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules