v1.1.1

Avatar Group

Stacked avatar components showing multiple users with overflow indicator.

Default

Overlapping avatars with an overflow counter.

html
User 1
User 2
User 3
User 4
+3 
<div class="vt-flex vt--space-x-3">
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
    <img src="https://i.pravatar.cc/80?img=1" alt="User 1">
  </div>
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
    <img src="https://i.pravatar.cc/80?img=2" alt="User 2">
  </div>
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
    <img src="https://i.pravatar.cc/80?img=3" alt="User 3">
  </div>
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
    <img src="https://i.pravatar.cc/80?img=4" alt="User 4">
  </div>
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
    <span class="vt-text-xs vt-font-medium vt-text-foreground-muted">+3</span>
  </div>
</div>

Sizes

Avatar groups in small, default, and large sizes.

html
Small
User 1
User 2
User 3
+2
Default
User 1
User 2
User 3
+2
Large
User 1
User 2
User 3
+2 
<div class="vt-flex vt-items-center vt-gap-4">
  <span class="vt-text-xs vt-text-foreground-muted vt-w-10">Small</span>
  <div class="vt-flex vt--space-x-2">
    <div class="vt-avatar vt-avatar-sm vt-ring-2 vt-ring-surface-page">
      <img src="https://i.pravatar.cc/80?img=1" alt="User 1">
    </div>
    <div class="vt-avatar vt-avatar-sm vt-ring-2 vt-ring-surface-page">
      <img src="https://i.pravatar.cc/80?img=2" alt="User 2">
    </div>
    <div class="vt-avatar vt-avatar-sm vt-ring-2 vt-ring-surface-page">
      <img src="https://i.pravatar.cc/80?img=3" alt="User 3">
    </div>
    <div class="vt-avatar vt-avatar-sm vt-ring-2 vt-ring-surface-page">
      <span class="vt-font-medium vt-text-foreground-muted">+2</span>
    </div>
  </div>
</div>

<div class="vt-flex vt-items-center vt-gap-4">
  <span class="vt-text-xs vt-text-foreground-muted vt-w-10">Default</span>
  <div class="vt-flex vt--space-x-3">
    <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
      <img src="https://i.pravatar.cc/80?img=1" alt="User 1">
    </div>
    <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
      <img src="https://i.pravatar.cc/80?img=2" alt="User 2">
    </div>
    <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
      <img src="https://i.pravatar.cc/80?img=3" alt="User 3">
    </div>
    <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
      <span class="vt-text-xs vt-font-medium vt-text-foreground-muted">+2</span>
    </div>
  </div>
</div>

<div class="vt-flex vt-items-center vt-gap-4">
  <span class="vt-text-xs vt-text-foreground-muted vt-w-10">Large</span>
  <div class="vt-flex vt--space-x-4">
    <div class="vt-avatar vt-w-12 vt-h-12 vt-ring-2 vt-ring-surface-page">
      <img src="https://i.pravatar.cc/80?img=1" alt="User 1">
    </div>
    <div class="vt-avatar vt-w-12 vt-h-12 vt-ring-2 vt-ring-surface-page">
      <img src="https://i.pravatar.cc/80?img=2" alt="User 2">
    </div>
    <div class="vt-avatar vt-w-12 vt-h-12 vt-ring-2 vt-ring-surface-page">
      <img src="https://i.pravatar.cc/80?img=3" alt="User 3">
    </div>
    <div class="vt-avatar vt-w-12 vt-h-12 vt-ring-2 vt-ring-surface-page">
      <span class="vt-text-sm vt-font-medium vt-text-foreground-muted">+2</span>
    </div>
  </div>
</div>

With Initials

Avatar group mixing images and initial-based avatars with distinct colors.

html
User 1
AJ
User 2
SC
ML
+4 
<div class="vt-flex vt--space-x-3">
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
    <img src="https://i.pravatar.cc/80?img=1" alt="User 1">
  </div>
  <div class="vt-avatar vt-avatar-md vt-bg-info-fill vt-ring-2 vt-ring-surface-page">
    <span class="vt-text-sm vt-font-medium vt-text-generic-white">AJ</span>
  </div>
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
    <img src="https://i.pravatar.cc/80?img=2" alt="User 2">
  </div>
  <div class="vt-avatar vt-avatar-md vt-bg-info-fill vt-ring-2 vt-ring-surface-page">
    <span class="vt-text-sm vt-font-medium vt-text-generic-white">SC</span>
  </div>
  <div class="vt-avatar vt-avatar-md vt-bg-info-fill vt-ring-2 vt-ring-surface-page">
    <span class="vt-text-sm vt-font-medium vt-text-generic-white">ML</span>
  </div>
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
    <span class="vt-text-xs vt-font-medium vt-text-foreground-muted">+4</span>
  </div>
</div>

With Status

Avatars with online and offline status indicators.

html
User 1
User 2
User 3
User 4
User 5
+3 
<div class="vt-flex vt-gap-4">
  <!-- Online -->
  <div class="vt-relative vt-inline-flex">
    <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
      <img src="https://i.pravatar.cc/80?img=1" alt="User 1">
    </div>
    <span class="vt-absolute vt-bottom-0 vt-right-0 vt-w-3 vt-h-3 vt-rounded-full vt-bg-info-fill vt-ring-2 vt-ring-surface-page"></span>
  </div>
  <!-- Online -->
  <div class="vt-relative vt-inline-flex">
    <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
      <img src="https://i.pravatar.cc/80?img=2" alt="User 2">
    </div>
    <span class="vt-absolute vt-bottom-0 vt-right-0 vt-w-3 vt-h-3 vt-rounded-full vt-bg-info-fill vt-ring-2 vt-ring-surface-page"></span>
  </div>
  <!-- Offline -->
  <div class="vt-relative vt-inline-flex">
    <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
      <img src="https://i.pravatar.cc/80?img=3" alt="User 3">
    </div>
    <span class="vt-absolute vt-bottom-0 vt-right-0 vt-w-3 vt-h-3 vt-rounded-full vt-bg-foreground-muted vt-ring-2 vt-ring-surface-page"></span>
  </div>
  <!-- Online -->
  <div class="vt-relative vt-inline-flex">
    <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
      <img src="https://i.pravatar.cc/80?img=4" alt="User 4">
    </div>
    <span class="vt-absolute vt-bottom-0 vt-right-0 vt-w-3 vt-h-3 vt-rounded-full vt-bg-info-fill vt-ring-2 vt-ring-surface-page"></span>
  </div>
  <!-- Offline -->
  <div class="vt-relative vt-inline-flex">
    <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
      <img src="https://i.pravatar.cc/80?img=5" alt="User 5">
    </div>
    <span class="vt-absolute vt-bottom-0 vt-right-0 vt-w-3 vt-h-3 vt-rounded-full vt-bg-foreground-muted vt-ring-2 vt-ring-surface-page"></span>
  </div>
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
    <span class="vt-text-xs vt-font-medium vt-text-foreground-muted">+3</span>
  </div>
</div>

With Tooltip Labels

Hover over each avatar to see the user name.

html
Alice Johnson
Alice Johnson
Bob Smith
Bob Smith
Carol Davis
Carol Davis
David Lee
David Lee
+5
5 more users 
<div class="vt-flex vt--space-x-3">
  <!-- Avatar 1 -->
  <div class="vt-tooltip-wrap vt-group/avatar vt-z-0 vt-hover:z-10">
    <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page vt-transition-transform vt-group-hover/avatar:scale-110">
      <img src="https://i.pravatar.cc/80?img=1" alt="Alice Johnson">
    </div>
    <div class="vt-tooltip">
      Alice Johnson
      <div class="vt-absolute vt-top-full vt-left-1/2 vt--translate-x-1/2 vt-border-[3px] vt-border-transparent vt-border-t-brand-fill"></div>
    </div>
  </div>
  <!-- Avatar 2 -->
  <div class="vt-tooltip-wrap vt-group/avatar vt-z-0 vt-hover:z-10">
    <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page vt-transition-transform vt-group-hover/avatar:scale-110">
      <img src="https://i.pravatar.cc/80?img=2" alt="Bob Smith">
    </div>
    <div class="vt-tooltip">
      Bob Smith
      <div class="vt-absolute vt-top-full vt-left-1/2 vt--translate-x-1/2 vt-border-[3px] vt-border-transparent vt-border-t-brand-fill"></div>
    </div>
  </div>
  <!-- Avatar 3 -->
  <div class="vt-tooltip-wrap vt-group/avatar vt-z-0 vt-hover:z-10">
    <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page vt-transition-transform vt-group-hover/avatar:scale-110">
      <img src="https://i.pravatar.cc/80?img=3" alt="Carol Davis">
    </div>
    <div class="vt-tooltip">
      Carol Davis
      <div class="vt-absolute vt-top-full vt-left-1/2 vt--translate-x-1/2 vt-border-[3px] vt-border-transparent vt-border-t-brand-fill"></div>
    </div>
  </div>
  <!-- Avatar 4 -->
  <div class="vt-tooltip-wrap vt-group/avatar vt-z-0 vt-hover:z-10">
    <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page vt-transition-transform vt-group-hover/avatar:scale-110">
      <img src="https://i.pravatar.cc/80?img=4" alt="David Lee">
    </div>
    <div class="vt-tooltip">
      David Lee
      <div class="vt-absolute vt-top-full vt-left-1/2 vt--translate-x-1/2 vt-border-[3px] vt-border-transparent vt-border-t-brand-fill"></div>
    </div>
  </div>
  <!-- Overflow -->
  <div class="vt-tooltip-wrap vt-group/avatar vt-z-0 vt-hover:z-10">
    <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page vt-transition-transform vt-group-hover/avatar:scale-110">
      <span class="vt-text-xs vt-font-medium vt-text-foreground-muted">+5</span>
    </div>
    <div class="vt-tooltip">
      5 more users
      <div class="vt-absolute vt-top-full vt-left-1/2 vt--translate-x-1/2 vt-border-[3px] vt-border-transparent vt-border-t-brand-fill"></div>
    </div>
  </div>
</div>

Compact Stack

Tightly overlapping avatars with a large overflow counter.

html
User 1
User 2
User 3
User 4
User 5
User 6
+12 
<div class="vt-flex vt--space-x-4">
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
    <img src="https://i.pravatar.cc/80?img=10" alt="User 1">
  </div>
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
    <img src="https://i.pravatar.cc/80?img=11" alt="User 2">
  </div>
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
    <img src="https://i.pravatar.cc/80?img=12" alt="User 3">
  </div>
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
    <img src="https://i.pravatar.cc/80?img=13" alt="User 4">
  </div>
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
    <img src="https://i.pravatar.cc/80?img=14" alt="User 5">
  </div>
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
    <img src="https://i.pravatar.cc/80?img=15" alt="User 6">
  </div>
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surface-page">
    <span class="vt-text-xs vt-font-medium vt-text-foreground-muted">+12</span>
  </div>
</div>

Guidelines

Stacked avatars for teams/participants with a +N overflow avatar.

User 1
User 2
User 3
+8
Do
Collapse extra members into a +N overflow avatar.
User 1
User 2
User 3
User 4
User 5
User 6
User 7
User 8
Don't
Don't render an unbounded row of avatars — cap it with a +N counter.
User 1
User 2
+2
Do
Keep a consistent ring so overlapping avatars stay visually separated.

API Reference

All CSS classes available for the Avatar Group component.

Class Type Description
vt-flex vt--space-x-3 Base Overlapping layout for default-size avatars
vt-flex vt--space-x-2 Size Tighter overlap for small avatars
vt-flex vt--space-x-4 Size Wider overlap for large or compact avatars
vt-ring-2 vt-ring-surface-page Base White ring to visually separate overlapping avatars
vt-z-0 vt-hover:z-10 Modifier Brings hovered avatar to front (tooltip variant)

Accessibility

Keyboard and screen reader support.

Feature Details
Group label Wrap in a container with aria-label describing the group, e.g. "Team members"
Overflow The "+N" counter should have aria-label="N more users" for screen readers
Tooltips Name tooltips should use role="tooltip" with aria-describedby on the avatar
Images Each avatar image needs unique alt text with the user name
Built with:
Avatar Badge