Astryx Design System

Avatar Group Overflow@astryxdesign/core v0.0.15 · AvatarGroupOverflow

Usage

AvatarGroupOverflow appears at the end of an AvatarGroup to summarize people who are not shown individually. Use it when a group is sliced to a small number of visible avatars but the hidden count still matters.

ts
import {AvatarGroupOverflow} from '@astryxdesign/core/AvatarGroup'

Best practices

Guidance	Practices
Do	Pass the real hidden count to `count` so the accessible label matches the visible indicator.
Do	Use short custom text such as `+12` or `99+`; the indicator is sized like an avatar.
Do	Provide `onClick` when the overflow opens a member list, popover, or detail view.
Don't	Do not use long labels inside the indicator; place longer participant details next to the group instead.

Examples

Common configurations, variations, and states.

AvatarGroupOverflow — Custom Text

Provide short custom children such as 12+ when the overflow count needs compact product-specific formatting.

AvatarGroupOverflow — Default Count

Use AvatarGroupOverflow without children to render the standard +N overflow count.