AvatarGroup

molecules

Stacked avatar list — 3+ avatars overlapping by -8px, with overflow count. Used for attendees, collaborators, team members.

ARIA Role: group

Demo

JD
AB
+

Props

PropTypeRequiredDefaultDescription
usersUserRef[]Yes—1+ users
maxnumberNo4Avatars above this collapse to +N

TypeScript Interface

interface AvatarGroupProps {
  users: { initials: string; alt?: string }[];
  max?: number;
  size?: 'sm' | 'md' | 'lg';
}

Assertions (NASA Rule 5)

  • [type]users must have ≥1 entry(NASA Rule 7)
  • [aria]Wrapper must have role='group' and aria-label='{N} attendees'(WCAG 1.3.1)

Usage

Import

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

Basic

<Avatargroup />

With Variants

<Avatargroup variant="primary" size="md" />