Avatar group
A stack of avatars for teams and shared items, with an overflow count.
Preview
A working preview of Avatar group in the Brickclay style. Try it.
AASKMZ+4AASKMZJDTBmax = 3 with a +N bubble whose tooltip lists the hidden names.
Interact with the preview to see events here.
Avatar Group, stacked list with a +N overflow
bk-avatar-group stacks a list of bk-avatars. Pass an avatars array and a max; anyone beyond it collapses into a +N bubble whose tooltip lists the hidden names.
API reference, bk-avatar-group inputs
| Input | Type | Default | Description |
|---|---|---|---|
avatars | AvatarGroupItem[] | [] | The people to stack. See the item shape below. |
max | number | 3 | Max avatars shown before the rest collapse into a +N bubble. |
size | 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'md' | Shared size applied to every avatar (and the overlap spacing). |
variant | 'gray' | 'colored' | 'gray' | Default variant for items that don't set their own. |
showOverflow | boolean | true | Show the +N bubble. When false, extra avatars are simply hidden. |
AvatarGroupItem shape
| Property | Type | Description |
|---|---|---|
src? | string | null | Image URL. Falls back to initials/icon if missing or it fails to load. |
name? | string | Used for initials, the per-avatar tooltip, and the +N overflow tooltip. |
initialsOverride? | string | Explicit initials instead of ones derived from name. |
alt? | string | Alt text for the image. |
tooltipContent? | string | string[] | null | Custom tooltip; defaults to name. |
bgColor? | string | null | Override background colour (e.g. for initials). |
textColor? | string | null | Override text colour. |
variant? | 'gray' | 'colored' | Per-item variant; overrides the group's variant. |
dot? | 'active' | 'inactive' | 'notification' | 'none' | Optional status dot on this avatar. |
dotPosition? | 'bottom-right' | 'top-left' | Where the status dot sits. |