chrome
<tc-avatar-group>
Overlapping cluster of avatars with an overflow "+N" pill. Pairs with `tc-avatar` for team / collaborator UIs.
import
"@ra9/tan-compose-kit/avatar-group"
Props
| Name | Type | Default | Description |
|---|---|---|---|
max | number | 4 | Maximum visible avatars before the overflow pill. Set to `0` to show all. |
spacing | "tight" | "normal" | "loose" | "normal" | Overlap density. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Applied to children that don't carry their own `size` attribute. |
Slots
| Slot | Description |
|---|---|
(default) | `tc-avatar` elements. Anything else is rendered but not counted toward `max`. |
CSS variables
| Variable | Default | Description |
|---|---|---|
--tc-avatar-group-ring | var(--tc-color-surface, #ffffff) | Ring around each avatar — matches the page surface to separate stacked avatars. |
--tc-avatar-group-overflow-bg | var(--tc-color-rule, #ece5d3) | Overflow pill background. |
--tc-avatar-group-overflow-fg | var(--tc-color-ink, #14171f) | Overflow pill text color. |
Examples
Basic
Sizes
Spacing
Show all (no overflow)
Accessibility
- Hidden avatars are removed from the accessibility tree (via
hidden), so screen-reader users only hear the visible ones plus the overflow count. - The overflow pill is plain text. If you need it to be interactive (e.g., open a popover with the rest of the names), wrap the group and the popover in a parent and click-handle it there.