Avatar groups
The v-avatar-group component is used to display a collection of avatars in a stacked or grouped layout, commonly used for showing collaborators, team members, or user lists.
Installation
Labs components require manual import and registration with the Vuetify instance.
import { VAvatarGroup } from 'vuetify/labs/VAvatarGroup'
export default createVuetify({
components: {
VAvatarGroup,
},
})
Usage
Avatar groups stack avatars together with overlapping edges. Use the items prop to render avatars from an array, or nest v-avatar components directly.
<v-avatar-group
border="md surface opacity-100"
:items="items"
:limit="3"
></v-avatar-group><script setup>
const items = [
{ image: 'https://vuetifyjs.b-cdn.net/docs/images/one/snips/avatars/3.jpg' },
{ image: 'https://vuetifyjs.b-cdn.net/docs/images/one/snips/avatars/4.jpg' },
{ icon: 'mdi-account', color: 'info' },
{ text: 'JD', color: 'primary' },
{ icon: 'mdi-account', color: 'success' },
]
</script>API
| Component | Description |
|---|---|
| v-avatar-group | Primary component |
| v-avatar | Sub-component used to display individual avatars |
Examples
Props
Items
Use the items prop to render avatars from an array. Strings are treated as image URLs, objects are passed as props to v-avatar.
Size and Gap
Use the size prop to control avatar dimensions and the gap prop to adjust the overlap between avatars.
Reverse
The reverse prop displays avatars in reverse stacking order. When rendering individual avatars (instead of passing items), use toReversed to counter flexbox visual order.
Vertical
Use the vertical prop to stack avatars vertically instead of horizontally.
Slots
Overflow
Use the overflow slot to customize or replace the last item when using the limit prop.
Misc
Hoverable
Groups of avatars can be customized further with slots and hoverable prop for subtle interactions.