Avatar

Circular badge with initials + deterministic gradient fallback. Optional image. Sizes xs (16px) → lg (32px). Each name hashes to one of 8 placeholder gradients — these will be replaced with curated brand gradients later.

Sizes

xs (16px) · sm (20px) · md (24px) · lg (32px). md matches the PropertyField pill height.

xs

sm

md

lg

Gradient palette (deterministic)

Same name always produces the same gradient. Bright by design — easy to tell people apart at small sizes.

Avatar stack

Overlapping group with ring separators. Shows up to N (default 3), then '+remainder' chip.

+1

+5

+5

With image (fallback to initials on error)

Pass src to use an image. If the image fails to load, falls back to the gradient + initials automatically.

(broken src → falls back to initials)