Skip to content
TrademarkTrademark
Docs
Components

AvatarGroup

Updated: May 5, 2025
View on GitHub

A component for displaying multiple user avatars in a compact, horizontal stack. Commonly used in collaborative interfaces to show team members, participants, or contributors.

Sizes

AvatarGroup supports the same T-shirt sizing model as Avatar.

Limit

Use the limit prop to control how many avatars are displayed. Any additional avatars will be represented by a count indicator.

Reverse order

Use the reverse prop to change the stacking order of avatars.

Mixed types

AvatarGroup supports all the same avatar types as the Avatar component.

API reference

Type
Default
avatarsrequired
The people, in order.
AvatarProps[]—
size
Size of every avatar in the stack.
xllmsxs
m
reverse
Stack from the other side.
booleanfalse
limit
Show at most this many, then a +N.
number—
className
string—
style
React.CSSProperties—
…and every FlexProps propinherited—
Edit this page on GitHub