AvatarGroup
Display multiple user avatars in an overlapping stack with an overflow counter.
Install Dependencies
npx quickcode-ui add AvatarGroupExamples
Default Avatar Group
SC
MC
EW
DB
+2SCMCEW+3
Props
AvatarGroup
| Prop | Type | Default | Description |
|---|---|---|---|
avatars | AvatarData[] | required | Array of avatar data objects |
max | number | 4 | Maximum number of avatars to display |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Size of all avatars in the group |
className | string | undefined | Additional CSS classes |
showTooltip | boolean | false | Whether to show tooltips on hover |
AvatarData
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | undefined | Image source URL (optional) |
alt | string | required | Alternative text for the image |
fallback | string | required | Fallback initials or text |
tooltipContent | string | undefined | Content to display in tooltip |
Last updated on