Default

The default avatar group component:

() => {
  const data = [
    {src: "/avatar.webp"},
    {src: "/avatar2.webp"},
    {src: "/avatar3.webp"},
    {src: "/avatar4.webp"},
    {src: "/avatar5.webp"},
    {src: "/avatar6.webp"},
  ];
  return <AvatarGroup data={data} />
};

() => {
  const data = [
    {src: "/avatar.webp"},
    {src: "/avatar2.webp"},
    {src: "/avatar3.webp"},
    {src: "/avatar4.webp"},
    {src: "/avatar5.webp"},
    {src: "/avatar6.webp"},
  ];
  return <AvatarGroup data={data} />
};

Size

The avatar group with a custom avatar size:

() => {
  const data = [
    {src: "/avatar.webp"},
    {src: "/avatar2.webp"},
    {src: "/avatar3.webp"},
    {src: "/avatar4.webp"},
    {src: "/avatar5.webp"},
  ];
  return <AvatarGroup data={data} size={48} />
};

() => {
  const data = [
    {src: "/avatar.webp"},
    {src: "/avatar2.webp"},
    {src: "/avatar3.webp"},
    {src: "/avatar4.webp"},
    {src: "/avatar5.webp"},
  ];
  return <AvatarGroup data={data} size={48} />
};

Max count

The maximum number of avatars allowed in the list can be customized.

() => {
  const data = [
    {src: "/avatar.webp"},
    {src: "/avatar2.webp"},
    {src: "/avatar3.webp"},
    {src: "/avatar4.webp"},
    {src: "/avatar5.webp"},
    {src: "/avatar6.webp"},
  ];
  return <AvatarGroup data={data} maxCount={3} size={48} />
};

() => {
  const data = [
    {src: "/avatar.webp"},
    {src: "/avatar2.webp"},
    {src: "/avatar3.webp"},
    {src: "/avatar4.webp"},
    {src: "/avatar5.webp"},
    {src: "/avatar6.webp"},
  ];
  return <AvatarGroup data={data} maxCount={3} size={48} />
};