Components / Avatar Group
Avatar Group
Overlapping avatar stack with "+N more" overflow badge and status dots.
data-displayv0.5.0
Playground
Examples
Team
<cg-avatar-group></cg-avatar-group>Import
import { CgAvatarGroup } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-avatar-group';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
avatars | {src?, name, status?}[] | — | Avatar list |
maxVisible | number | 4 | Max shown |
size | "sm"|"md"|"lg" | "md" | Size |
expanded | boolean | false | Spread avatars apart (no overlap) |
Events
| Event | Detail | Description |
|---|---|---|
cg-avatar-group-click | {} | Avatar clicked |
cg-avatar-group-overflow-click | {} | Overflow badge clicked |