Components · Person

Avatar

The atom of every roster, byline and assignee list: a circular identity chip that shows an image when src is set and otherwise falls back to initials derived from the name. Five token-driven sizes, an accent tint for the highlighted person, an app-added presence dot, and the AvatarGroup stack that collapses a crowd into a +N chip.

Avatar — sizes (xs · sm · md · lg · xl)
MV
xs
20px
MV
sm
24px
MV
md
32px
MV
lg
40px
MV
xl
52px

One square that renders as a circle. Size scales the chip and its type together — never the colour or shape. md (32px) is the default; use the smallest size that stays legible in context (xs for stacks & dense rows, xl for profile headers).

Initials fallback + image + accent + square

Initials from the name

No src ⇒ up to two letters (first + last word). Tint is derived deterministically from the name.

A
Ada
GO
Grace Okafor
AO
Amara N. Okoye
(empty)

Image, accent & square

src renders an image (object-fit:cover). accent marks the signed-in user; square is for org / logo marks.

src + ring
JD
accent (you)
square (org)
Presence dot
MV
active
DC
on call
TI
away
PN
sm · active
Active — on shift this week On call — reachable for transport Away — paused / on break

The presence dot is an app add-on over the DS avatar (a .status-dot anchored bottom-right with a 2px surface ring so it reads against the chip). It shrinks on xs/sm. Meaning is never colour-alone — pair it with a label or title.

AvatarGroup — overlap + N overflow chip
MV GO PN TI HW
five — no cap
MV GO PN +4
max=3 → +4
MV GO PN TI +96
render 4 · total 100

Children overlap by -8px with a 2px surface ring between them, then everything past max folds into one +N chip (surface-2, tabular-nums). Use total to render a few but count many. The chip is decorative — name the set with a nearby label (e.g. "Brooklyn transport team").

size
xs 20 · sm 24 · md 32 (default) · lg 40 · xl 52. Token-driven off the space scale; type steps with the chip.
name
Always pass it — drives the initials fallback (first + last word, "?" when empty) and the accessible label, even behind an image.
src
Image URL → <img class=avatar__img>, object-fit:cover. Omit (or on error) → initials chip.
accent · ring · square
Combinable booleans. accent tints the initials chip (one highlighted person); ring adds an inset hairline for busy backgrounds; square swaps to --radius-md for org marks.
AvatarGroup max / total
max caps rendered avatars; the rest fold into +N. total overrides the count (render 4, show +96). Keep children one small size.

Source · DS Avatar + AvatarGroup (catalog/people.css — .avatar, --xs…--xl, --accent, .avatar-group__more) · forum/Avatar.tsx + forum-tokens.ts (forumInitials(), avatarTone() name→colour). Presence dot reuses the DS .status-dot.