Components
Avatars
Size scale with image and initials fallback, plus AvatarStack overlap, overflow, and sizing.
Avatars
Sizes — with image
POPOPOPOPOPO
Sizes — initials fallback
GFGFGFGFGFGF
Avatar stack — all visible
AvatarStack sets the overlap spacing and applies a background-coloured ring to every child via the *: direct-children selector — no need to size or border each Avatar individually.
PTBIP
Avatar stack — overflow
With max, AvatarStack reserves the last position for a +N chip. Below, 5 collaborators with max=4 renders 3 visible + a +2 overflow chip.
PTB+2
Avatar stack — size scale
The stack's size propagates to every child via context — no per-Avatar size needed. Overlap spacing scales with size so the visible stride stays proportional.
xs
PTB+2
sm
PTB+2
md
PTB+2
lg
PTB+2