AvatarGroup component for building consistent, accessible interfaces.
Loading demo: avatar-group-real-world
npx sdaia-ui@latest add avatargroup
Use AvatarGroup consistently across your product following the usage guidelines and spacing rules defined in the design system.
A stacked row of avatars representing multiple users.
Loading demo: avatargroup-maxcount-do
Limits visible avatars and shows a count bubble for the remaining users.
Loading demo: avatargroup-maxcount-do
Props for the Avatar Group component.
Prop | Type | Default | Required |
|---|---|---|---|
items | AvatarGroupItem[] | — | required |
type | 'group' | 'individual' | 'group' | optional |
size | AvatarSize | 'md' | optional |
max | number | — | optional |
dir | 'ltr' | 'rtl' | — | optional |
rtl | boolean | — | optional |
