Avatar group

An overlapping stack of avatars with overflow.

import { BuiAvatarGroup } from 'ng-blatui';

<bui-avatar-group [avatars]="team" [max]="3" />
// team = [{ name: 'Ada Lovelace' }, { name: 'Alan Turing' }, ...]

Images

<bui-avatar-group [avatars]="team" [max]="3" />
// team = [{ name: 'Ada', src: '/a.png' }, ...]

Sizes

<bui-avatar-group [avatars]="team" [max]="4" size="sm" />
<bui-avatar-group [avatars]="team" [max]="4" size="lg" />

API reference

Inputs

Prop	Type	Default	Description
`avatars`	`readonly GroupAvatar[]`	`[]`	Avatars to display, in order.
`max`	`number`	`4`	Maximum avatars shown before the rest collapse into a "+N" counter.
`size`	`"default" \| "lg" \| "sm"`	`'default'`	Avatar size preset, which also controls overlap and ring width.

Types

GroupAvatar

Field	Type	Description
`src`?	`string`	Image URL for the avatar; omit to render initials from `name`.
`name`?	`string`	Display name used for initials and the image alt text.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.