Avatar Group
This is a Labs component. The API may change in future releases. Import from vuetify/labs/VAvatarGroup.
Usage
<template>
<v-avatar-group :items="users">
</v-avatar-group>
</template>
<script setup>
import { ref } from 'vue'
import { VAvatarGroup } from 'vuetify/labs/VAvatarGroup'
const users = ref([
{ image: 'https://i.pravatar.cc/150?img=1' },
{ image: 'https://i.pravatar.cc/150?img=2' },
{ image: 'https://i.pravatar.cc/150?img=3' },
{ image: 'https://i.pravatar.cc/150?img=4' }
])
</script>
API
Props
items
AvatarGroupItem[]
default:"[]"
Array of avatar items. Can be strings (image URLs) or objects with avatar props.
itemProps
boolean | string | Function
default:"null"
How to extract props from items. Set to true to use item as props directly.
Maximum number of avatars to display before showing overflow.
Size applied to all avatars in the group.
border
boolean | number | string
Border applied to avatars for better visual separation.
Gap between avatars. Negative values create overlap.
Enables hover effect to expand avatars on hover.
Reverses the order of avatars.
Displays avatars vertically instead of horizontally.
Custom text for the overflow counter. Defaults to ”+”.
Slots
Default slot for manual avatar placement.
Content displayed before the avatar group.
Content displayed after the avatar group.
Customize individual avatar display.
Customize the overflow counter display.
Examples
With Limit and Overflow
<template>
<v-avatar-group :items="users" :limit="3">
</v-avatar-group>
</template>
<script setup>
import { ref } from 'vue'
import { VAvatarGroup } from 'vuetify/labs/VAvatarGroup'
const users = ref([
{ image: 'https://i.pravatar.cc/150?img=1' },
{ image: 'https://i.pravatar.cc/150?img=2' },
{ image: 'https://i.pravatar.cc/150?img=3' },
{ image: 'https://i.pravatar.cc/150?img=4' },
{ image: 'https://i.pravatar.cc/150?img=5' }
])
</script>
Hoverable with Border
<template>
<v-avatar-group
:items="users"
hoverable
border="2"
size="48"
/>
</template>
Custom Item Props
<template>
<v-avatar-group
:items="users"
:item-props="getItemProps"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VAvatarGroup } from 'vuetify/labs/VAvatarGroup'
const users = ref([
{ name: 'John Doe', avatar: 'https://i.pravatar.cc/150?img=1', color: 'primary' },
{ name: 'Jane Smith', avatar: 'https://i.pravatar.cc/150?img=2', color: 'secondary' }
])
function getItemProps(item) {
return {
image: item.avatar,
color: item.color
}
}
</script>
Vertical Layout
<template>
<v-avatar-group
:items="users"
vertical
size="40"
/>
</template>
Custom Overflow
<template>
<v-avatar-group :items="users" :limit="3">
<template #overflow="{ overflow }">
<v-avatar color="primary">
<span>{{ overflow }} more</span>
</v-avatar>
</template>
</v-avatar-group>
</template>
With Text Avatars
<template>
<v-avatar-group :items="users" size="48" border="2" />
</template>
<script setup>
import { ref } from 'vue'
import { VAvatarGroup } from 'vuetify/labs/VAvatarGroup'
const users = ref([
{ text: 'JD', color: 'primary' },
{ text: 'JS', color: 'secondary' },
{ text: 'AB', color: 'accent' }
])
</script>
Manual Avatars
<template>
<v-avatar-group size="48" border="2">
<v-avatar color="primary">
<v-icon>mdi-account</v-icon>
</v-avatar>
<v-avatar color="secondary">
<v-icon>mdi-account</v-icon>
</v-avatar>
<v-avatar color="accent">
<v-icon>mdi-account</v-icon>
</v-avatar>
</v-avatar-group>
</template>