Avatar group
Several people in one slot: up to three overlapping avatars, then a +N count. The names are one hover away.
Playground
Change the controls to try each prop. The preview passes five consultants as people; the code under it lists only the props you changed.
import { AvatarGroup } from '@/ui/avatar';<AvatarGroup label="Consultants" />Stack
Up to three avatars, then +N. Each avatar overlaps the one before by about a fifth of its size and wears a 2px ring of the page colour. The count is the last circle, ink on the current grey. Hover or Tab to the count and the tooltip names everyone after 300ms.
import { AvatarGroup } from '@/ui/avatar';
const consultants = [
{ name: 'Joseph Ariel' },
{ name: 'Sara Lund' },
{ name: 'Tom Lindqvist' },
{ name: 'Priya Shah' },
{ name: 'Ava Nguyen' },
];
export default function AvatarGroupStack() {
return (
<div className="flex items-center gap-400">
<AvatarGroup label="Consultants" people={consultants} />
<AvatarGroup label="Consultants" people={consultants} size="medium" />
<AvatarGroup label="Consultants" people={consultants} size="large" />
</div>
);
}Two or three people
No count until there are more people than max. One person is an avatar with a name, not a group.
import { AvatarGroup } from '@/ui/avatar';
export default function AvatarGroupTwoOrThree() {
return (
<div className="flex items-center gap-400">
<AvatarGroup label="Guests" people={[{ name: 'Joseph Ariel' }, { name: 'Sara Lund' }]} size="medium" />
<AvatarGroup label="Guests" people={[{ name: 'Joseph Ariel' }, { name: 'Sara Lund' }, { name: 'Maya Chen', src: '/examples/maya-chen.svg' }]} size="medium" />
</div>
);
}In a table cell
One consultant shows as an avatar with a name; two or more become the group. The ring takes the row's fill through --avatar-ring, so a hovered row has no white halos.
import { Avatar, AvatarGroup } from '@/ui/avatar';
const jobs = [
{ title: 'Senior Data Engineer', consultants: [{ name: 'Joseph Ariel' }] },
{ title: 'Head of Risk', consultants: [{ name: 'Joseph Ariel' }, { name: 'Sara Lund' }, { name: 'Tom Lindqvist' }, { name: 'Priya Shah' }] },
];
export default function AvatarGroupInATableCell() {
return (
<div className="w-140 overflow-hidden rounded-large bg-surface text-body shadow-[inset_0_0_0_1px_var(--color-border)]">
{jobs.map((job) => (
<div key={job.title} className="flex h-9 border-b border-border last:border-b-0 hover:bg-background-hovered hover:[--avatar-ring:var(--color-background-hovered)]">
<span className="flex w-65 shrink-0 items-center border-e border-border px-150 font-medium">{job.title}</span>
<span className="flex grow items-center gap-075 px-150">
{job.consultants.length === 1 ? (
<>
<Avatar name={job.consultants[0].name} />
{job.consultants[0].name}
</>
) : (
<AvatarGroup label="Consultants" people={job.consultants} />
)}
</span>
</div>
))}
</div>
);
}