PersonChip

Attio's own actor chip (measured live on techpartners, Tasks page, "Assigned to" column): a 16px circular avatar (a photo, or hashed-colour initials when none is given) in a neutral Chip, gap: 3px between avatar and name. Every other value — the pill's height, padding, radius, ring and text — is already Chip's, unchanged; PersonChip adds no recipe of its own.

Installation

npm install @crisp-ui-kit/crisp

Props

Notes

• avatar is a photo URL; omitted, the avatar falls back to a per-name hashed-colour initials tile (one of 5 tones — the same set DataTable's own avatarTone="hashed" picks from), so two different people reliably get two different colours without a real photo.
• muted de-emphasises the name only (fgNeutralMuted, the same token Text's own tone="muted" uses) — the avatar keeps its full-strength tone, so the chip still reads as a distinct person, not a disabled control.
• trailing renders after the name, inside the chip's own flex row, for one more thing that must never shrink or wrap out of view (an icon, a small badge) — a consumer wrapping PersonChip in its own row for this used to need its own min-width: 0 to keep shrinking correctly, and overflowed its container without it (#668, fixed by #683).
• Ellipsis-truncates on overflow, no tooltip on hover — a truncated cell in Attio is revealed by the cell's own click-to-expand, not a chip tooltip (#623).