Skip to content

Accessibility: Partial

Translations: Not Needed

Avatar Group

Group multiple avatars together with various display options

Basic Usage

Vue
html
<template>
  <HLAvatarGroup id="basic-avatar-group" :options="options" size="md" />
</template>

<script setup lang="ts">
  import { HLAvatarGroup } from '@platform-ui/highrise'

  const options = [
    {
      name: 'Zenin Toji',
      src: 'https://www.dexerto.com/cdn-image/wp-content/uploads/2023/11/02/jujutsu-kaisen-toji.jpeg?width=1200&quality=60&format=auto',
      objectFit: 'cover',
      type: 'error',
      offset: [-6, 36],
      size: 'xs',
      color: 'red',
      border: true,
    },
    {
      name: 'Itadori Yuuji',
      src: 'https://www.comingsoon.net/wp-content/uploads/sites/3/2024/04/jujutsu-kaisen-jin-itadori-family-tree.png',
      objectFit: 'cover',
      type: 'success',
      offset: [-6, 36],
      size: 'xs',
      color: 'green',
      border: true,
    },
    {
      name: 'Gojo Satoru',
      src: 'https://static0.gamerantimages.com/wordpress/wp-content/uploads/2022/11/gojo-satoru.jpg?q=50&fit=crop&w=1140&h=&dpr=1.5',
      objectFit: 'cover',
      type: 'info',
      offset: [-6, 36],
      size: 'xs',
      color: 'blue',
      border: true,
    },
  ]
</script>

Stacked Avatars

html
<HLAvatarGroup id="stacked-avatar-group" :options="options" size="md" stacked />
ts
const options = [
  {
    name: 'Zenin Toji',
    src: 'https://www.dexerto.com/cdn-image/wp-content/uploads/2023/11/02/jujutsu-kaisen-toji.jpeg?width=1200&quality=60&format=auto',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'red',
    border: true,
  },
  {
    name: 'Itadori Yuuji',
    src: 'https://www.comingsoon.net/wp-content/uploads/sites/3/2024/04/jujutsu-kaisen-jin-itadori-family-tree.png',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'green',
    border: true,
  },
  {
    name: 'Gojo Satoru',
    src: 'https://static0.gamerantimages.com/wordpress/wp-content/uploads/2022/11/gojo-satoru.jpg?q=50&fit=crop&w=1140&h=&dpr=1.5',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'blue',
    border: true,
  },
]

With Tooltips

html
<HLAvatarGroup id="tooltip-avatar-group" :options="options" size="md" stacked tooltip />
ts
const options = [
  {
    name: 'Zenin Toji',
    src: 'https://www.dexerto.com/cdn-image/wp-content/uploads/2023/11/02/jujutsu-kaisen-toji.jpeg?width=1200&quality=60&format=auto',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'red',
    border: true,
  },
  {
    name: 'Itadori Yuuji',
    src: 'https://www.comingsoon.net/wp-content/uploads/sites/3/2024/04/jujutsu-kaisen-jin-itadori-family-tree.png',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'green',
    border: true,
  },
  {
    name: 'Gojo Satoru',
    src: 'https://static0.gamerantimages.com/wordpress/wp-content/uploads/2022/11/gojo-satoru.jpg?q=50&fit=crop&w=1140&h=&dpr=1.5',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'blue',
    border: true,
  },
]

With Max Display

+1
html
<HLAvatarGroup id="max-avatar-group" :options="options" size="md" stacked tooltip :max="2" />
ts
const options = [
  {
    name: 'Zenin Toji',
    src: 'https://www.dexerto.com/cdn-image/wp-content/uploads/2023/11/02/jujutsu-kaisen-toji.jpeg?width=1200&quality=60&format=auto',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'red',
    border: true,
  },
  {
    name: 'Itadori Yuuji',
    src: 'https://www.comingsoon.net/wp-content/uploads/sites/3/2024/04/jujutsu-kaisen-jin-itadori-family-tree.png',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'green',
    border: true,
  },
  {
    name: 'Gojo Satoru',
    src: 'https://static0.gamerantimages.com/wordpress/wp-content/uploads/2022/11/gojo-satoru.jpg?q=50&fit=crop&w=1140&h=&dpr=1.5',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'blue',
    border: true,
  },
]

With Action Button

+1
No events yet
html
<template>
  <div>
    <HLAvatarGroup id="action-avatar-group" :options="options" size="md" stacked tooltip :max="2" action @on-action="onAction">
      <template #action>
        <PlusIcon />
      </template>
    </HLAvatarGroup>
    <div class="mt-4 text-sm space-y-2">
      <div v-for="(event, index) in events" :key="index" class="text-gray-500">{{ event.timestamp }} - {{ event.name }}</div>
      <div v-if="!events.length" class="text-gray-400">No events yet</div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  const events = ref([])
  const onAction = () => {
    events.value.push({
      name: '@on-action',
      timestamp: new Date().toLocaleTimeString(),
    })
  }

  const options = [
    {
      name: 'Zenin Toji',
      src: 'https://www.dexerto.com/cdn-image/wp-content/uploads/2023/11/02/jujutsu-kaisen-toji.jpeg?width=1200&quality=60&format=auto',
      objectFit: 'cover',
      offset: [-6, 36],
      size: 'xs',
      color: 'red',
      border: true,
    },
    {
      name: 'Itadori Yuuji',
      src: 'https://www.comingsoon.net/wp-content/uploads/sites/3/2024/04/jujutsu-kaisen-jin-itadori-family-tree.png',
      objectFit: 'cover',
      offset: [-6, 36],
      size: 'xs',
      color: 'green',
      border: true,
    },
    {
      name: 'Gojo Satoru',
      src: 'https://static0.gamerantimages.com/wordpress/wp-content/uploads/2022/11/gojo-satoru.jpg?q=50&fit=crop&w=1140&h=&dpr=1.5',
      objectFit: 'cover',
      offset: [-6, 36],
      size: 'xs',
      color: 'blue',
      border: true,
    },
  ]
</script>

Sizes

html
<HLAvatarGroup id="xs-avatar-group" :options="options" size="xs" stacked tooltip />
<HLAvatarGroup id="sm-avatar-group" :options="options" size="sm" stacked tooltip />
<HLAvatarGroup id="md-avatar-group" :options="options" size="md" stacked tooltip />
ts
const options = [
  {
    name: 'Zenin Toji',
    src: 'https://www.dexerto.com/cdn-image/wp-content/uploads/2023/11/02/jujutsu-kaisen-toji.jpeg?width=1200&quality=60&format=auto',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'red',
    border: true,
  },
  {
    name: 'Itadori Yuuji',
    src: 'https://www.comingsoon.net/wp-content/uploads/sites/3/2024/04/jujutsu-kaisen-jin-itadori-family-tree.png',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'green',
    border: true,
  },
  {
    name: 'Gojo Satoru',
    src: 'https://static0.gamerantimages.com/wordpress/wp-content/uploads/2022/11/gojo-satoru.jpg?q=50&fit=crop&w=1140&h=&dpr=1.5',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'blue',
    border: true,
  },
]

With Scroll

+11
html
<HLAvatarGroup id="scroll-avatar-group" :options="optionsForScroll" size="md" stacked tooltip />
ts
const optionsForScroll = [
  {
    name: 'Zenin Toji',
    src: 'https://www.dexerto.com/cdn-image/wp-content/uploads/2023/11/02/jujutsu-kaisen-toji.jpeg?width=1200&quality=60&format=auto',
    objectFit: 'cover',
  },
  {
    name: 'Itadori Yuuji',
    src: 'https://www.comingsoon.net/wp-content/uploads/sites/3/2024/04/jujutsu-kaisen-jin-itadori-family-tree.png',
    objectFit: 'cover',
  },
  {
    name: 'Gojo Satoru',
    src: 'https://static0.gamerantimages.com/wordpress/wp-content/uploads/2022/11/gojo-satoru.jpg?q=50&fit=crop&w=1140&h=&dpr=1.5',
    objectFit: 'cover',
  },
  {
    // name: 'Gakuganji',
    src: 'https://static0.gamerantimages.com/wordpress/wp-content/uploads/2024/02/yoshinobu-principal.jpg',
    objectFit: 'cover',
  },
  {
    name: 'Todo Aoi',
    src: 'https://i.pinimg.com/736x/f3/fa/4f/f3fa4ff433d083e8a6e7974dde041162.jpg',
    objectFit: 'cover',
  },
  {
    name: 'Monkey D. Luffy - Pirate King',
    src: 'https://static0.gamerantimages.com/wordpress/wp-content/uploads/2022/12/luffy-with-his-straw-hat.jpg?q=50&fit=crop&w=1140&h=&dpr=1.5',
    objectFit: 'cover',
  },
  {
    name: 'Zenin Maki',
    src: 'https://i.pinimg.com/736x/76/99/81/769981e8c3ad0e4dc0ba029d831aef34.jpg',
    objectFit: 'cover',
  },
  {
    name: 'Zoro',
    src: 'https://www.dexerto.com/cdn-image/wp-content/uploads/2023/04/20/one-piece-zoro-in-wano-arc.jpeg?width=1200&quality=60&format=auto',
    objectFit: 'cover',
  },
  {
    name: 'Nami',
    src: 'https://www.dexerto.com/cdn-image/wp-content/uploads/2025/01/08/gta-6-leak-realistic-details.jpg?width=1200&quality=60&format=auto',
    objectFit: 'cover',
  },
  {
    name: 'Sanji',
    src: 'https://www.dexerto.com/cdn-image/wp-content/uploads/2025/01/09/Marvel-Rivals-Blade.jpg?width=1200&quality=60&format=auto',
    objectFit: 'cover',
  },
  {
    name: 'Franky',
    src: 'https://www.dexerto.com/cdn-image/wp-content/uploads/2025/01/09/delta-force-uluru-operator.jpg?width=1200&quality=60&format=auto',
    objectFit: 'cover',
  },
  {
    name: 'Brook',
    src: 'https://www.dexerto.com/cdn-image/wp-content/uploads/2025/01/10/Monster-Hunter-World-Hadouken-Only-Challenge.jpg?width=1200&quality=60&format=auto',
    objectFit: 'cover',
  },
]

With Status Indicator

Displays a colored status dot indicator on each avatar. The indicator's color can be customized by setting the color property in each avatar's options.

html
<HLAvatarGroup id="status-avatar-group" :options="options" size="md" :stacked="false" tooltip :status-indicator="true" />
ts
const options = [
  {
    name: 'Zenin Toji',
    src: 'https://www.dexerto.com/cdn-image/wp-content/uploads/2023/11/02/jujutsu-kaisen-toji.jpeg?width=1200&quality=60&format=auto',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'red', // Custom color for the status indicator
    border: true,
  },
  {
    name: 'Itadori Yuuji',
    src: 'https://www.comingsoon.net/wp-content/uploads/sites/3/2024/04/jujutsu-kaisen-jin-itadori-family-tree.png',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'green', // Custom color for the status indicator
    border: true,
  },
  {
    name: 'Gojo Satoru',
    src: 'https://static0.gamerantimages.com/wordpress/wp-content/uploads/2022/11/gojo-satoru.jpg?q=50&fit=crop&w=1140&h=&dpr=1.5',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'blue', // Custom color for the status indicator
    border: true,
  },
]

Imports

ts
import { HLAvatarGroup } from '@platform-ui/highrise'
import type { HLAvatarGroupSize } from '@platform-ui/highrise'

Props

PropTypeDefaultDescription
id *string | undefinedundefinedUnique identifier for the avatar group
size'md' | 'sm' | 'xs''md'Size of the avatars in the group
stackedbooleanfalseWhether avatars should overlap each other
tooltipbooleanfalseShow tooltips with avatar names on hover
actionbooleanfalseShow an action button at the end of the group
optionsArray<AvatarOption>[]Array of avatar options to display
maxnumber3Maximum number of avatars to display
status-indicatorbooleanfalseShow status (dot) indicator on avatars

Types

AvatarOption

PropertyTypeDescription
name *stringName to be displayed in the tooltip
srcstringSource of the avatar image. If not provided, the component picks up initials from the name.
objectFit'cover' | 'contain'How the image should be resized to fit its container
roundbooleanWhether the avatar should be rounded
colorstringColor of the dot indicator
dotbooleanWhether to show a dot indicator
maxnumberMaximum number of avatars to display
processingbooleanWhether the avatar is processing
showZerobooleanWhether to show a zero indicator
showbooleanWhether to show the avatar
valuenumber | stringValue to be displayed in the avatar
offset[number | string, number | string]Offset of the avatar from the center
borderbooleanWhether to show a border around the avatar

Emits

NameParametersDescription
@on-action(): voidTriggered when action button clicked

Slots

NameParametersDescription
action()Custom icon for action button