Skip to main content

Avatar Group

Avatar Group displays a compact list of user avatars and summarizes additional members with an overflow count.

Import

import { AvatarGroup } from '@vortexlabs/vortex';
import type { AvatarGroupProps } from '@vortexlabs/vortex';

Display

<AvatarGroup members={members} limit={3} />

Allied components

Avatar

Other links

Storybook
  • Bonnie Hong
  • Ugi Stelmokaitis
  • Bonnie Hong
  • Ugi Stelmokaitis

  • +2

<AvatarGroup
  members={[{"id":"bonnie","name":"Bonnie Hong","src":"https://pbs.twimg.com/profile_images/1536360219147907073/RX64EVOE_400x400.jpg"},{"id":"ugi","name":"Ugi Stelmokaitis","src":"https://pbs.twimg.com/profile_images/1936983814116638720/G3kbEPZY_400x400.jpg"},{"id":"bonnie-2","name":"Bonnie Hong","src":"https://pbs.twimg.com/profile_images/1536360219147907073/RX64EVOE_400x400.jpg"},{"id":"ugi-2","name":"Ugi Stelmokaitis","src":"https://pbs.twimg.com/profile_images/1936983814116638720/G3kbEPZY_400x400.jpg"},{"id":"bonnie-3","name":"Bonnie Hong","src":"https://pbs.twimg.com/profile_images/1536360219147907073/RX64EVOE_400x400.jpg"},{"id":"ugi-3","name":"Ugi Stelmokaitis","src":"https://pbs.twimg.com/profile_images/1936983814116638720/G3kbEPZY_400x400.jpg"}]}
  limit={4}
  size="md"
  rounded={false}
/>

Features

  • Displays a horizontal list of member avatars.
  • Shows an overflow count when members exceed the limit.
  • Supports square and rounded avatars.
  • Supports xs, sm, and md sizes.
  • Customizable via className and attributes props.

Shape

Avatar Group is square by default. Use the rounded prop to render circular avatars.

  • Bonnie Hong
  • Ugi Stelmokaitis
  • Bonnie Hong
  • Ugi Stelmokaitis

  • +2

  • Bonnie Hong
  • Ugi Stelmokaitis
  • Bonnie Hong
  • Ugi Stelmokaitis

  • +2

<AvatarGroup members={avatarMembers} limit={4} />
<AvatarGroup members={avatarMembers} limit={4} rounded />

Sizes

Avatar Group is available in three sizes: xs, sm, and md. The default size is md.

  • Bonnie Hong
  • Ugi Stelmokaitis
  • Bonnie Hong
  • Ugi Stelmokaitis

  • +2

  • Bonnie Hong
  • Ugi Stelmokaitis
  • Bonnie Hong
  • Ugi Stelmokaitis

  • +2

  • Bonnie Hong
  • Ugi Stelmokaitis
  • Bonnie Hong
  • Ugi Stelmokaitis

  • +2

<AvatarGroup members={avatarMembers} limit={4} size="xs" />
<AvatarGroup members={avatarMembers} limit={4} size="sm" />
<AvatarGroup members={avatarMembers} limit={4} size="md" />

Limit

The limit prop controls how many avatars are visible. Additional members are represented with a count.

  • Bonnie Hong
  • Ugi Stelmokaitis
  • Bonnie Hong
  • Ugi Stelmokaitis

  • +2

  • Bonnie Hong
  • Ugi Stelmokaitis

  • +4

<AvatarGroup members={avatarMembers} limit={4} />
<AvatarGroup members={avatarMembers} limit={2} />

Members

Each member needs a unique id, an image src, and a name. Member order is preserved.

  • Bonnie Hong
  • Ugi Stelmokaitis
Member names are used as image alt text.
const members = [
{
  id: "bonnie",
  name: "Bonnie Hong",
  src: "https://pbs.twimg.com/profile_images/1536360219147907073/RX64EVOE_400x400.jpg",
},
{
  id: "ugi",
  name: "Ugi Stelmokaitis",
  src: "https://pbs.twimg.com/profile_images/1936983814116638720/G3kbEPZY_400x400.jpg",
},
];

<AvatarGroup members={members} limit={2} />

Accessibility

Avatar Group renders a list of avatar images and uses each member name as the image alt text.

Description
Renders the root as a semantic <ul> with each avatar rendered inside an <li>.
Each member name is passed to the avatar image as alt text.
Use attributes to provide a custom group label when the default aria-label is not specific enough.