Avatar Group
Group multiple avatars together with various display options
Basic Usage



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


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


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



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
Prop | Type | Default | Description |
---|---|---|---|
id * | string | undefined | undefined | Unique identifier for the avatar group |
size | 'md' | 'sm' | 'xs' | '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 |
status-indicator | boolean | false | Show status (dot) indicator on avatars |
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 |
Emits
Name | Parameters | Description |
---|---|---|
@on-action | (): void | Triggered when action button clicked |
Slots
Name | Parameters | Description |
---|---|---|
action | () | Custom icon for action button |