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.

API

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.