Components
AvatarStack
Overlapping avatars from a data array that collapse overflow into a +N chip.
AvatarStack is the data-driven sibling of AvatarGroup: pass an avatars
array of { name, src, alt } and it renders the overlapping row for you,
showing the first max (default 4) and collapsing the rest into a +N chip.
The size and shape props apply to every avatar in the stack. Use it for
collaborator and assignee lists where the data comes from a backend.
Example
Preview
ALATGH+2
import { AvatarStack } from '@officina/ui';
<AvatarStack
max={3}
avatars={[
{ name: 'Ada Lovelace' },
{ name: 'Alan Turing' },
{ name: 'Grace Hopper' },
{ name: 'Katherine Johnson' },
]}
/>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| avatars* | AvatarStackItem[] | — | Avatar data to render in the stack. |
| max | number | 4 | Max avatars shown before collapsing the rest into a `+N` chip. Defaults to `4`. |
| shape | "circle" | "square" | null | circle | Shape applied to every avatar in the stack. Defaults to `'circle'`. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | null | md | Size applied to every avatar in the stack. Defaults to `'md'`. |