AvatarGroup

Arrange or stack multiple avatars and show the count of hidden members in team and collaborator lists.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use AvatarGroup to display several participants in a row or stack. Use an ordinary list for contact details rather than placing whole rows of information in AvatarGroup.

Direct children that participate in layout and the +N count must declare as="item". Use max to limit the visible count.
In row layout, size is the size of one avatar. In stack layout, size is the group container size. The same value does not imply the same avatar size in both layouts.

Import

import { AvatarGroup } from '@snowui-design-system/components';

Usage

Sizes

Stacking counts

API Reference

Property	Type	Default	Example	Description
`max`	`number`	`—`	`max={42}`	With no value, row has no count limit while stack has at most four positions. row shows up to max avatars plus a +N badge; stack includes the +N position within max and never shows more than four positions. Explicit values are floored and clamped at zero; count text is capped at +99.
`layout`	`AvatarGroupLayout`	`"row"`	`layout={value}`	row overlaps avatars horizontally; stack piles them within a circular container with up to four positions. The two modes interpret size and max differently.
`size`	`ResourceSize`	`—`	`size={value}`	Supports 12, 16, 20, 24, 28, 32, 40, 48, and 80. In row, this is the size of one avatar; in stack, it is the group container size and avatar size is derived from max. Inherits parent size context when omitted.
`enableResponsive`	`boolean`	`true`	`enableResponsive`	Enable responsive behavior on the root Frame. AvatarGroup still owns its avatar layout and overflow count; disabling this does not disable overflow behavior.
`enableContext`	`boolean`	`true`	`enableContext`	Whether to provide size context to child Avatar, Icon, and Badge components.
`children`	`Snippet`	`—`	`<AvatarGroup>Content</AvatarGroup>`	Ordered direct children with as="item", usually Avatars. These items participate in layout, hiding, and the +N count; other content is not counted.