AvatarGroup
Overlapping avatars with a +N overflow — Attio's team / member rows.
A stack of overlapping Avatars with an optional "+N" overflow chip — Attio's team and member rows. Each avatar is ringed in the surface colour so it reads against its neighbour.
Preview
SDIK+2
Usage
import { Avatar, AvatarGroup } from "crisp";
<AvatarGroup max={4} size="lg">
<Avatar tone="brand">S</Avatar>
<Avatar tone="purple">D</Avatar>
<Avatar tone="green">I</Avatar>
{/* …more */}
</AvatarGroup>;API
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | <Avatar> elements to stack, left on the outside. |
max | number | — | Show at most this many, then a "+N" chip. |
size | AvatarSize | "md" | Size of the overflow chip; match your avatars. |