Dowe

DISPLAY

AvatarGroup

AvatarGroup renders a stack or inline collection of identities from static item entries or a Signal-backed array, with a deterministic overflow counter.

PLAYGROUND

Show a live project roster

Use items when the collection already lives in page state. max keeps the header compact without throwing away the complete source array.

SIGNAL ARRAY

Design systems guild

The fifth person becomes an overflow counter when max is four on web, Android, and iOS.

signal team value:[
  { name:"Maya" alt:"Maya Chen" },
  { name:"Leo" alt:"Leo Martin" },
  { name:"Amara" alt:"Amara Okafor" },
  { name:"Lin" alt:"Lin Park" },
]
AvatarGroup items:team size:"xl" max:4 bordered:true variant:"soft" scheme:"primary"

ADVANCED PATTERNS

Choose the right density

Stacked groups communicate membership; inline groups work better inside metadata rows and compact headers.

STACKED

Project collaborators

INLINE

Review participants

AUTO FIT

Responsive header

AvatarGroup size:"lg" max:3 bordered:true variant:"solid" scheme:"secondary"
  item name:"Ada" alt:"Ada Lovelace"
  item name:"Grace" alt:"Grace Hopper"
  item name:"Linus" alt:"Linus Torvalds"
  item name:"Margaret" alt:"Margaret Hamilton"

AvatarGroup size:"sm" inline:true variant:"soft" scheme:"success"
  item name:"Maya" alt:"Maya Chen"
  item name:"Leo" alt:"Leo Martin"
  item name:"Dowe" alt:"Dowe Agent"

FALLBACKS

Image, then initials

A valid HTTPS or packaged local src wins first; without it, name and alt keep the identity recognizable on every target.

INTERACTION

Items can navigate

Static item entries also accept href, target, externalMode, and onClick when an identity should act as a link or action.

API

Props

AvatarGroup also accepts the applicable common spacing, sizing, border, visibility, and accessibility props.

Prop	Type	Default
No data There are no records to display

Previous Avatar

Next Badge

No data