AvatarGroup

Display

Stacked group of avatars with an overflow counter.

Props

Prop	Type	Default	Description
`items`	`DsAvatarGroupItem[]`	`[]`	Avatar list { src?, alt?, initials? }.
`max`	`number`	`4`	Maximum number of avatars displayed before the overflow counter.
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`	Avatar size.

Examples

Stacked avatars

vue

<DsAvatarGroup
  :items="[
    { initials: 'AG', alt: 'Antoine Gourgue' },
    { initials: 'MD', alt: 'Marie Dupont' },
    { initials: 'LM', alt: 'Luc Martin' },
    { initials: 'SB', alt: 'Sophie Bernard' },
    { initials: 'PL', alt: 'Pierre Leroy' },
    { initials: 'CK', alt: 'Camille Klein' },
  ]"
  :max="4"
  size="md"
/>

Skeleton

Use DsAvatarGroupSkeleton as a loading placeholder while content is being fetched.

Default (4)

vue

<DsAvatarGroupSkeleton :count="4" />

Large (6)

vue

<DsAvatarGroupSkeleton :count="6" />

Accessibility

Each avatar has a title attribute for the name.

Avatar

Card