AvatarGroup

Data Display

Stacked avatar display with overflow handling, max count configuration, and hover expansion

Avatar Groups

Display multiple user avatars as a stacked group with size, spacing, and max-count options.

+1

Sizes

Avatar groups inherit size from the group component.

Small

Medium

Large

No Gap

Create tightly stacked avatar groups by disabling spacing.

Max Count

Control how many avatars are displayed while showing a +more indicator.

+2

Interactive Group

Combine avatar groups with buttons or clickable UI patterns.

Usage Guidelines

When to Use

Team displays
Shared items
Participant lists

Accessibility

Announces total count
Overflow count read by screen readers

Performance

Only visible avatars rendered
Lightweight overflow

Common Mistakes

Too many visible avatars
Clicking avatar doesn't show details

Frequently Asked Questions

AvatarGroup shows a +N indicator when there are more avatars than the max count.

Yes, AvatarGroup max count is configurable.

View on GitHub

See the full source code on GitHub

Related Components

Collapsible content sections with single/multiple expansion modes, animation, and keyboard navigation

User avatar with image loading, fallback text generation, status indicators, and shape variants

Status indicator with variant system, dot mode, positioning, and pulsing animation support

Container component with header, body, footer composition, variant system including glass morphism effects

Avatar

Badge