Avatar Group @astryx-svelte/core v0.5.2 · 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 | Slice the list yourself and pass only the avatars you want visible; 3-5 is typical. The group renders exactly the children it is given and never slices for you. |
| 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. This follows the WAI-ARIA APG roving tabindex technique for managing focus in a composite: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex |
| Don't | Don't nest AvatarGroups; use a single group with all avatars. |
| Don't | Don't set size on the child avatars. The group's size wins over each child's own size prop, including when the group leaves size at its default, so a child's size is silently ignored inside a group. |
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.
AvatarGroup — Interactive
Live preview pending — this block's Svelte rewrite has not landed yet.
A facepile whose avatars link to profiles, with an overflow indicator that opens the full member list. The whole group is one Tab stop; arrow keys move between the avatars and the overflow button.