Avatar Group @astryx-svelte/core v0.3.0 · AvatarGroup
Usage
AvatarGroup displays multiple avatars in an overlapping row with an optional overflow indicator. Uses a compositional API: pass Avatar children directly so each avatar can carry its own props (status dots, click handlers, etc.).ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Set max to limit visible avatars when the list is long; 3-5 is typical. |
| Do | Use AvatarGroupOverflow for custom overflow content like a popover trigger or "add member" button. |
| Do | Pass status dots, click handlers, or tooltips directly on each Avatar child. |
| Do | Make avatars interactive with href or onClick to link to profiles. Interactive avatars share a single Tab stop; arrow keys move between them, and the group announces a keyboard hint to assistive tech. |
| Don't | Don't nest AvatarGroups; use a single group with all avatars. |
Examples
Common configurations, variations, and states.Avatar — Group
Overlap multiple avatars in a row to represent a group of people. Use for team lists, PR reviewers, or participant counts where you want to show faces without taking up much space.