Avatar Group

Renders a horizontal stack of overlapping Avatar components. When the list exceeds max, a +N overflow chip is shown. Avatars are separated by a ring matching the background color.

Import

import { AvatarGroup } from '@atom-forge/ui';

---

Props

Prop	Type	Default	Description
avatars	{ name?: string; src?: string; color?: string }[]	—	Array of avatar data. Each entry maps directly to an Avatar component.
max	number	5	Maximum number of visible avatars. Overflow shown as +N.
compact	boolean	false	h-8 w-8 per avatar.
small	boolean	false	h-6 w-6 per avatar.
micro	boolean	false	h-5 w-5 per avatar.
class	string	—	Extra Tailwind classes on the wrapper.

---

Usage

<AvatarGroup avatars={[
  { name: 'Alice Johnson' },
  { name: 'Bob Smith' },
  { name: 'Carol White' },
  { name: 'David Lee' },
  { name: 'Eve Martinez' },
  { name: 'Frank Brown' },
]} max={4}/>

<!-- With images -->
<AvatarGroup avatars={[
  { name: 'Alice', src: '/avatars/alice.jpg' },
  { name: 'Bob' },
  { name: 'Carol', src: '/avatars/carol.jpg' },
]} compact/>

When to use

Use for a compact preview of participants, owners, or assignees.

Alternatives

Render individual Avatar components when names, tooltips, or per-person actions must remain available.

Setup and behavior

The first max entries are shown in array order; overflow is a count, not an expandable menu. Supply a nonnegative integer max and at most one size prop. Group entries expose only name, image, and color: the group does not forward tooltip or click handlers to each avatar.