Astryx Design System

Avatar Group@astryxdesign/core v0.0.15 · AvatarGroup

Usage

AvatarGroup displays multiple avatars in an overlapping row with an optional overflow indicator. Uses a compositional API: pass Avatar children directly so each avatar can carry its own props (status dots, click handlers, etc.).

ts
import {AvatarGroup} from '@astryxdesign/core/AvatarGroup'

Best practices

Guidance	Practices
Do	Set max to limit visible avatars when the list is long; 3-5 is typical.
Do	Use AvatarGroupOverflow for custom overflow content like a popover trigger or "add member" button.
Do	Pass status dots, click handlers, or tooltips directly on each Avatar child.
Don't	Don't nest AvatarGroups; use a single group with all avatars.

Examples

Common configurations, variations, and states.

Avatar — Group

Overlap multiple avatars in a row to represent a group of people. Use for team lists, PR reviewers, or participant counts where you want to show faces without taking up much space.