AvatarGroupCluster

AvatarGroupCluster is used to both display a group of user avatars.

Props

Component props
Name	Type	Default
`collaborators` Required	`ReadonlyArray<{ color?: 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10; name: string; src?: string; }>`	-
	AvatarGroupCluster has different configurations for 2, 3, 4, and above 4 collaborators.
`size`	`"sm" \| "md"`	`"md"`
	AvaraGroupCluster is available in 2 fixed sizes. See the sizes variant to learn more.

Accessibility

Variants

Avatar

AvatarGroupClusters accepts name, image and colors for each collaborator's avatar.

import { AvatarGroupCluster, Flex } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignContent="center"
      direction="column"
      gap={4}
      height="100%"
      justifyContent="center"
    >
      <Flex
        alignContent="center"
        gap={4}
        height="100%"
        justifyContent="center"
        wrap
      >
        <AvatarGroupCluster
          collaborators={[
            {
              name: 'Fatima',
              src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
            },
            {
              name: 'Sora',
              src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
            },
            {
              name: 'Ayesha',
              src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
            },
            {
              name: 'Katie',
              src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg',
            },
          ]}
        />
        <AvatarGroupCluster
          collaborators={[
            {
              name: 'Fatima',
              src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
            },
            {
              name: 'Sora',
              src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
            },
            {
              name: 'Ayesha',
              src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
            },
            {
              name: 'Katie',
              src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg',
            },
          ]}
        />
        <AvatarGroupCluster
          collaborators={[
            {
              name: 'Fatima',
              src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
            },
            {
              name: 'Sora',
              src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
            },
            {
              name: 'Ayesha',
              src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
            },
            {
              name: 'Katie',
              src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg',
            },
          ]}
        />
        <AvatarGroupCluster
          collaborators={[
            {
              name: 'Fatima',
              src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
            },
            {
              name: 'Sora',
              src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
            },
            {
              name: 'Ayesha',
              src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
            },
            {
              name: 'Alberto',
              src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg',
            },
            {
              name: 'Kate',
              src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
            },
          ]}
        />
      </Flex>
      <Flex
        alignContent="center"
        gap={4}
        height="100%"
        justifyContent="center"
        wrap
      >
        <AvatarGroupCluster
          collaborators={[
            {
              name: 'Fatima',
              color: 1,
            },
            {
              name: 'Sora',
              color: 2,
            },
          ]}
        />
        <AvatarGroupCluster
          collaborators={[
            {
              name: 'Fatima',
              color: 1,
            },
            {
              name: 'Sora',
              color: 2,
            },
            {
              name: 'Ayesha',
              color: 3,
            },
          ]}
        />
        <AvatarGroupCluster
          collaborators={[
            {
              name: 'Fatima',
              color: 1,
            },
            {
              name: 'Sora',
              color: 2,
            },
            {
              name: 'Ayesha',
              color: 3,
            },
            {
              name: 'Katie',
              color: 4,
            },
          ]}
        />
        <AvatarGroupCluster
          collaborators={[
            {
              name: 'Fatima',
              color: 1,
            },
            {
              name: 'Sora',
              color: 2,
            },
            {
              name: 'Ayesha',
              color: 3,
            },
            {
              name: 'Katie',
              color: 4,
            },
            {
              name: 'Alberto',
              color: 5,
            },
          ]}
        />
      </Flex>
    </Flex>
  );
}

Size

AvatarGroupCluster is available in 2 fixed sizes: sm and md.

import { AvatarGroupCluster, Flex } from 'gestalt';

export default function Example() {
  return (
    <Flex direction="column" gap={4}>
      <Flex gap={4}>
        <AvatarGroupCluster
          collaborators={[
            {
              name: 'Fatima',
              src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
            },
            {
              name: 'Sora',
              src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
            },
          ]}
          size="sm"
        />
        <AvatarGroupCluster
          collaborators={[
            {
              name: 'Fatima',
              src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
            },
            {
              name: 'Sora',
              src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
            },
            {
              name: 'Ayesha',
              src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
            },
          ]}
          size="sm"
        />
        <AvatarGroupCluster
          collaborators={[
            {
              name: 'Fatima',
              src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
            },
            {
              name: 'Sora',
              src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
            },
            {
              name: 'Ayesha',
              src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
            },
            {
              name: 'Katie',
              src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg',
            },
          ]}
          size="sm"
        />
      </Flex>
      <Flex gap={4}>
        <AvatarGroupCluster
          collaborators={[
            {
              name: 'Fatima',
              src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
            },
            {
              name: 'Sora',
              src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
            },
          ]}
        />
        <AvatarGroupCluster
          collaborators={[
            {
              name: 'Fatima',
              src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
            },
            {
              name: 'Sora',
              src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
            },
            {
              name: 'Ayesha',
              src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
            },
          ]}
        />
        <AvatarGroupCluster
          collaborators={[
            {
              name: 'Fatima',
              src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
            },
            {
              name: 'Sora',
              src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
            },
            {
              name: 'Ayesha',
              src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
            },
            {
              name: 'Katie',
              src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg',
            },
          ]}
        />
      </Flex>
    </Flex>
  );
}

Counter

AvatarGroupCluster represents different cluster types for 2, 3, 4, and more than 4 collaborators. Above 4, a counter displays the amount of additional collaborator.

import { AvatarGroupCluster, Flex } from 'gestalt';

export default function Example() {
  return (
    <Flex gap={4} height="100%">
      <AvatarGroupCluster
        collaborators={[
          {
            name: 'Fatima',
            src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
          },
          {
            name: 'Sora',
            src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
          },
        ]}
      />
      <AvatarGroupCluster
        collaborators={[
          {
            name: 'Fatima',
            src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
          },
          {
            name: 'Sora',
            src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
          },
          {
            name: 'Ayesha',
            src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
          },
        ]}
      />
      <AvatarGroupCluster
        collaborators={[
          {
            name: 'Fatima',
            src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
          },
          {
            name: 'Sora',
            src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
          },
          {
            name: 'Ayesha',
            src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
          },
          {
            name: 'Katie',
            src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg',
          },
        ]}
      />
      <AvatarGroupCluster
        collaborators={[
          {
            name: 'Fatima',
            src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
          },
          {
            name: 'Sora',
            src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
          },
          {
            name: 'Ayesha',
            src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
          },
          {
            name: 'Katie',
            src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg',
          },
          {
            name: 'Alberto',
          },
        ]}
      />
      <AvatarGroupCluster
        collaborators={[
          ...[
            {
              name: 'Fatima',
              src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
            },
            {
              name: 'Sora',
              src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
            },
            {
              name: 'Ayesha',
              src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
            },
            {
              name: 'Katie',
              src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg',
            },
          ],
          ...Array(104)
            .fill('')
            .map((name, index) => ({ name: index, src: index })),
        ]}
        size="md"
      />
    </Flex>
  );
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library		Component is not currently available in Figma.
Responsive Web		Component does not respond to changing viewport sizes in web and mobile web.

Edit page on GitHub