Display

AvatarGroup

A stack of people, with presence. Avatar takes status too.

import { AvatarGroup } from "@flinbu/seed";

A group and presence

7 people in this file

import { Avatar, AvatarGroup } from "@flinbu/seed";

<div className="flex flex-col items-center gap-base">
  <div className="flex items-center gap-sm"><AvatarGroup people={PEOPLE} max={5} label="Editing now" /><span className="text-secondary body-body-3-regular">7 people in this file</span></div>
  <div className="flex items-center gap-base"><Avatar name="Ana Ruiz" status="online" /><Avatar name="Mei Chen" status="away" /><Avatar name="Tomás Gil" status="busy" /><Avatar name="Jon Berg" status="offline" /></div>
</div>

Use it for

Who's in a file, who reviewed a change, who's online.

Use something else for

Inside an AI conversation: no avatars there.

Props

Prop	Type	Default	Description
`people`	`{ name, src?, status? }[]`	–	In order of relevance.
`max`	`number`	`4`	Faces before +N.
`size`	`'xs''sm''md''lg'`	`'sm'`	Avatar size.
`label`	`string`	–	Names the group.
`Avatar: status`	`'online''away''busy''offline'`	–	Presence dot.

Accessibility

A labelled group; every face has a tooltip and its name includes the status (Ana Ruiz, away); the +N chip lists the rest.