AvatarGroup

An overlapping stack of avatars that shows a team or set of contributors in a small space, folding the rest into a "+N" count.

When to use

• Showing who owns, reviews or watches something in a card, table row or header.
• When the exact list matters less than "who, roughly, and how many".
• Use Avatar for a single person, or a full list/table when people need to read every name.

Usage

import { AvatarGroup } from "@/components/iris/avatar-group/avatar-group";

h(AvatarGroup, {
  label: "North ridge team",
  max: 4,
  members: [
    { name: "Katerina Vlachou", status: "online" },
    { name: "Stelios Antoniou" },
    { name: "Nefeli Kontou", src: "/people/nefeli.jpg" },
    { name: "Tomasz Wrona" },
    { name: "Clara Weiss" },
  ],
});

Props

Prop	Type	Default	Description
members	{ name: string; src?: string; status?: "online" | "offline" }[]	— (required)	People in display order. name is also the React key, so keep names unique.
max	number	4	Avatars shown before the rest fold into a "+N" chip.
size	"sm" | "md" | "lg"	"md"	28 / 36 / 48 px.
label	string	"Team members"	Accessible name of the group; the overflow chip reads "N more {label}".

Notes

• Renders role="group" with aria-label; each avatar has its own label, and hovering one lifts it and shows the name in a small tip.
• People joining or leaving open or close their slot so the stack slides; the "+N" count rolls up or down in the direction it changed. All motion is instant under reduced motion.
• Reads --hover, --ink-2, --ink, --page, --surface, --line, --line-strong.