AvatarGroup

Usage

Wrap multiple SAvatar components inside SAvatarGroup to stack them with overlapping rings. The group propagates its size to every child avatar automatically — individual avatars that set their own size still take precedence.

<SAvatarGroup>
  <SAvatar text="AB" color="primary" />
  <SAvatar text="CD" color="success" />
  <SAvatar text="EF" color="info" />
</SAvatarGroup>

Max

max limits how many avatars are visible. Extra avatars collapse into a +N count indicator. Static children, v-for, and <template v-for> lists use the same limit and overlap styling. Whitespace and conditional placeholders aren't counted.

<script setup lang="ts">
const people = ['AB', 'CD', 'EF', 'GH']
</script>

<template>
  <SAvatarGroup :max="2">
    <SAvatar v-for="person in people" :key="person" :text="person" />
  </SAvatarGroup>
</template>

Sizes

size controls the ring thickness and overlap spacing, and propagates to every child avatar that doesn't set its own size.

<SAvatarGroup size="sm">
  <SAvatar text="AB" color="primary" />
  <SAvatar text="CD" color="success" />
</SAvatarGroup>

Custom :ui

To see exactly what you'd be overriding - the current default classes for every slot and variant - here's AvatarGroup's own theme file:

Global and scoped theme recipes use ui.avatarGroup; child avatars retain their own ui.avatar recipe.

Props