AvatarGroup

The Avatar Group displays a collection of avatars, often used to represent groups or teams.

Source Code

uikit-react-core

size

spacing

maxVisible

direction

highlight

toBack

<HvAvatarGroup 
  size="md"
  spacing="loose"
  maxVisible={3}
  direction="row"
  highlight={false}
  toBack={false}
>
  <No Display Name
    alt="Ben"
    src="https://i.imgur.com/56Eeg1g.png"
  />
  <No Display Name
    alt="Beatrice"
    src="https://i.imgur.com/bE7vg3N.png"
  />
  <No Display Name
    alt="Wayne"
    src="https://i.imgur.com/ea22egF.png"
  />
  <No Display Name
    alt="Clara"
    src="https://i.imgur.com/6sYhSb6.png"
  />
  <No Display Name
    alt="Steve"
    src="https://i.imgur.com/8we9311.jpeg"
  />
  <No Display Name
    alt="Sarah"
    src="https://i.imgur.com/2aJYRLM.jpeg"
  />
  <No Display Name
    alt="Cristina"
    src="https://i.imgur.com/fj50fND.jpeg"
  />
</HvAvatarGroup>

<HvAvatarGroup 
  size="md"
  spacing="loose"
  maxVisible={3}
  direction="row"
  highlight={false}
  toBack={false}
>
  <No Display Name
    alt="Ben"
    src="https://i.imgur.com/56Eeg1g.png"
  />
  <No Display Name
    alt="Beatrice"
    src="https://i.imgur.com/bE7vg3N.png"
  />
  <No Display Name
    alt="Wayne"
    src="https://i.imgur.com/ea22egF.png"
  />
  <No Display Name
    alt="Clara"
    src="https://i.imgur.com/6sYhSb6.png"
  />
  <No Display Name
    alt="Steve"
    src="https://i.imgur.com/8we9311.jpeg"
  />
  <No Display Name
    alt="Sarah"
    src="https://i.imgur.com/2aJYRLM.jpeg"
  />
  <No Display Name
    alt="Cristina"
    src="https://i.imgur.com/fj50fND.jpeg"
  />
</HvAvatarGroup>

Custom overflow component

By default, when the number of avatars exceeds the maxVisible prop, the HvAvatarGroup component displays a +X indicator for the hidden avatars. You can customize this overflow behavior using the overflowComponent prop.

<HvAvatarGroup
  maxVisible={3}
  overflowComponent={(overflowCount) => (
    <HvTooltip title={`+${overflowCount}`}>
      <HvAvatar backgroundColor="brand" color="atmo1" role="img" />
    </HvTooltip>
  )}
>
  <HvAvatar alt="Ben" src="https://i.imgur.com/56Eeg1g.png" />
  <HvAvatar alt="Beatrice" src="https://i.imgur.com/bE7vg3N.png" />
  <HvAvatar alt="Wayne" src="https://i.imgur.com/ea22egF.png" />
  <HvAvatar alt="Clara" src="https://i.imgur.com/6sYhSb6.png" />
  <HvAvatar alt="Steve" src="https://i.imgur.com/8we9311.jpeg" />
  <HvAvatar alt="Sarah" src="https://i.imgur.com/2aJYRLM.jpeg" />
  <HvAvatar alt="Cristina" src="https://i.imgur.com/fj50fND.jpeg" />
</HvAvatarGroup>

<HvAvatarGroup
  maxVisible={3}
  overflowComponent={(overflowCount) => (
    <HvTooltip title={`+${overflowCount}`}>
      <HvAvatar backgroundColor="brand" color="atmo1" role="img" />
    </HvTooltip>
  )}
>
  <HvAvatar alt="Ben" src="https://i.imgur.com/56Eeg1g.png" />
  <HvAvatar alt="Beatrice" src="https://i.imgur.com/bE7vg3N.png" />
  <HvAvatar alt="Wayne" src="https://i.imgur.com/ea22egF.png" />
  <HvAvatar alt="Clara" src="https://i.imgur.com/6sYhSb6.png" />
  <HvAvatar alt="Steve" src="https://i.imgur.com/8we9311.jpeg" />
  <HvAvatar alt="Sarah" src="https://i.imgur.com/2aJYRLM.jpeg" />
  <HvAvatar alt="Cristina" src="https://i.imgur.com/fj50fND.jpeg" />
</HvAvatarGroup>

The HvAvatarGroup component expects HvAvatar as children but you can wrap them with a HvTooltip component to display a tooltip on hover.

export default function Demo() {
  return (
    <HvAvatarGroup maxVisible={4} size="lg" highlight>
      {users.map((u) => (
        <HvTooltip key={u.img} title={u.name} enterDelay={10}>
          <HvAvatar role="img" alt={u.name} src={u.img} />
        </HvTooltip>
      ))}
    </HvAvatarGroup>
  );
}


const users = [
  { name: "Ben", img: "https://i.imgur.com/56Eeg1g.png" },
  { name: "Beatrice", img: "https://i.imgur.com/bE7vg3N.png" },
  { name: "Wayne", img: "https://i.imgur.com/ea22egF.png" },
  { name: "Clara", img: "https://i.imgur.com/6sYhSb6.png" },
];

export default function Demo() {
  return (
    <HvAvatarGroup maxVisible={4} size="lg" highlight>
      {users.map((u) => (
        <HvTooltip key={u.img} title={u.name} enterDelay={10}>
          <HvAvatar role="img" alt={u.name} src={u.img} />
        </HvTooltip>
      ))}
    </HvAvatarGroup>
  );
}

const users = [
  { name: "Ben", img: "https://i.imgur.com/56Eeg1g.png" },
  { name: "Beatrice", img: "https://i.imgur.com/bE7vg3N.png" },
  { name: "Wayne", img: "https://i.imgur.com/ea22egF.png" },
  { name: "Clara", img: "https://i.imgur.com/6sYhSb6.png" },
];

Avatar Badge

AvatarGroup

Custom overflow component

With tooltip