Avatar Group
A wrapper component that groups multiple Avatar components together. Supports clustering avatars with overlapping borders, limiting the number of visible avatars with a remaining count, and both horizontal and vertical layouts.
+1
Props
| Name | Default | Type |
|---|---|---|
cluster | false | boolean Groups avatars closer together with overlapping borders for a stacked appearance |
gap | — | xxs xs s m l xl xxl xxxl number Gap between avatars. Not available when cluster is enabled |
limit | — | number Maximum number of avatars to show. A +N counter is rendered for the rest |
limitSize | — | s m l number Size of the overflow counter avatar. Should match the size of the Avatar components |
randomized | false | boolean When limit is set, picks avatars randomly instead of the first ones |
column | false | boolean Stacks avatars vertically instead of horizontally |
Slots
| Name | Accepts | Description |
|---|---|---|
default | any | One or more Avatar components (or elements wrapping them) to display in the group |
remaining | { remaining: number } | Scoped slot to customize the overflow counter. Receives the number of hidden avatars as remaining |