Accessibility: Full

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

Vueoptions

html

<HLAvatarGroup id="stacked-avatar-group" :options="options" size="md" stacked />

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

Dark Theme

Light Theme

Vueoptions

html

<HLAvatarGroup id="tooltip-avatar-group" :options="options" size="md" stacked tooltip />
<HLAvatarGroup id="tooltip-avatar-group" :options="options" size="md" stacked tooltip tooltipTheme="light" />

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

Light Theme

Dark Theme

Vueoptions

html

<HLAvatarGroup id="max-avatar-group" :options="options" size="md" stacked tooltip :max="2" overflowTheme="light" tooltipTheme="light" />
<HLAvatarGroup id="max-avatar-group" :options="options" size="md" stacked tooltip :max="2" overflowTheme="dark" tooltipTheme="dark" />

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

No events yet

Vue

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

Vueoptions

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 />

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

Vueoptions

html

<HLAvatarGroup id="scroll-avatar-group" :options="optionsForScroll" size="md" stacked tooltip />

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.

Vueoptions

html

<HLAvatarGroup id="status-avatar-group" :options="options" size="md" :stacked="false" tooltip :status-indicator="true" />

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,
  },
]

Accessibility

When an src is provided for the avatar, make sure to pass alt-text in imgProps.alt for complete a11y support
In cases where src and name props are provided but imgProps.alt is not, the name will be used as the fallback for imgProps.alt
A11y checks will fail if neither name nor imgProps.alt is provided

Imports

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

Props

Prop	Type	Default	Description
id *	`string \| undefined`	`undefined`	Unique identifier for the avatar group
size	`'md' \| 'sm' \| 'xs' \| '2xs' \| '3xs'`	`'md'`	Size of the avatars in the group
stacked	`boolean`	`false`	Whether avatars should overlap each other
tooltip	`boolean`	`false`	Show tooltips with avatar names on hover
action	`boolean`	`false`	Show an action button at the end of the group
options	`Array<AvatarOption>`	`[]`	Array of avatar options to display
max	`number`	`3`	Maximum number of avatars to display
tooltipTheme	`'light' \| 'dark'`	`'dark'`	Theme of the individual avatar tooltip
overflowTheme	`'light' \| 'dark''`	`'light'`	Theme of the avatar group overflow tooltip
status-indicator	`boolean`	`false`	Show status (dot) indicator on avatars, only works with `size` prop is `md`, `sm`, `xs`

Types

AvatarOption

Property	Type	Description
name *	`string`	Name to be displayed in the tooltip
src	`string`	Source 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
round	`boolean`	Whether the avatar should be rounded
color	`string`	Color of the dot indicator
dot	`boolean`	Whether to show a dot indicator
max	`number`	Maximum number of avatars to display
processing	`boolean`	Whether the avatar is processing
showZero	`boolean`	Whether to show a zero indicator
show	`boolean`	Whether to show the avatar
value	`number \| string`	Value to be displayed in the avatar
offset	`[number \| string, number \| string]`	Offset of the avatar from the center
border	`boolean`	Whether to show a border around the avatar
imgProps	`ImgHTMLAttributes`	Props to attach to the `<img />` element when src is passed to avatar

Emits

Name	Parameters	Description
`@on-action`	`(): void`	Triggered when action button clicked

Slots

Name	Parameters	Description
action	`()`	Custom icon for action button

Avatar Group ​

Basic Usage ​

Stacked Avatars ​

With Tooltips ​

Dark Theme ​

Light Theme ​

With Max Display ​

Light Theme ​

Dark Theme ​

With Action Button ​

Sizes ​

With Scroll ​

With Status Indicator ​

Accessibility ​

Imports ​

Props ​

Types ​

AvatarOption ​

Emits ​

Slots ​

Avatar Group

Basic Usage

Stacked Avatars

With Tooltips

Dark Theme

Light Theme

With Max Display

Light Theme

Dark Theme

With Action Button

Sizes

With Scroll

With Status Indicator

Accessibility

Imports

Props

Types

AvatarOption

Emits

Slots