astryx-vue

Avatar Group

Usage ​

Import the components from their dedicated entry. Structural styles are loaded automatically.

vue
<script setup lang="ts">
import { Avatar, AvatarGroup, AvatarGroupOverflow } from '@astryx-vue/core/AvatarGroup'
</script>

<template>
  <AvatarGroup size="md">
    <Avatar name="Ana Thomas" />
    <Avatar name="Ben Lee" />
    <Avatar name="Carol Davis" />
    <AvatarGroupOverflow :count="5" />
  </AvatarGroup>
</template>

Best practices ​

GuidancePractice
RecommendedSet size and shape on AvatarGroup so child avatars inherit them.
RecommendedPass only the avatars you want to show, and use AvatarGroupOverflow for the rest.
RecommendedWhen there are many avatars, show the most recently active or important users first.
Don'tSet different size or shape on individual avatars inside a group.
Don'tShow too many avatars. Typically show 3–5 and summarize the rest with the overflow counter.

Examples ​

Basic

ATBLCDNT +5

Avatars overlap each other, with a +N overflow indicator at the end.

Sizes

ATBLCD +2
ATBLCD +2
ATBLCD +2

AvatarGroup supports sm, md, lg sizes; all child avatars scale together.