AvatarGroup
Overlapping row of kit Avatars with a +N count for the rest.
Master
Switch size and shape across a stack of six people: three faces plus a +3 count.
AJ
+3Usage
Use for several people on a row, card or table cell. Only kit Avatars go in the group. People past max collapse into a +N count, not another face. One person is a plain Avatar. See contracts/avatargroup.json for the full contract.
Do's
- Several people on a row, card or table cell, like assignees or viewers.
Don'ts
- Do not invent a local avatar stack.
- Do not put anything but people in the group.
- Do not use for one person. Use Avatar.
- Do not put a status dot on a face.
- Do not make the group clickable.
- Do not use raw hex.
<AvatarGroup
label="Assignees"
size="md"
shape="circle"
items={[
{ name: "Maya Chen", src: "/faces/maya-chen.jpg" },
{ name: "Ada Jones" },
{ name: "Noah Williams", src: "/faces/noah-williams.jpg" },
{ name: "Leo" },
{ name: "Iris Okafor", src: "/faces/iris-okafor.jpg" },
{ name: "Rio Vale" },
]}
/>