AvatarGroup – Once UI

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

AvatarGroup

<AvatarGroup
  size="l"
  avatars={[
    { src: "/images/avatar.jpg" },
    { value: "B" },
    { value: "C" },
    { value: "D" },
    { value: "E" }
  ]}
/>

Sizes

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

Sizes

<AvatarGroup
  size="s"
  avatars={[
    { value: "A" },
    { value: "B" },
    { value: "C" },
    { value: "D" }
  ]}
/>

Limit

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

Limit

<AvatarGroup
  size="m"
  limit={3}
  avatars={[
    { value: "A" },
    { value: "B" },
    { value: "C" },
    { value: "D" },
    { value: "E" },
    { value: "F" },
    { value: "G" }
  ]}
/>

Reverse order

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

Reverse

<AvatarGroup
  size="m"
  avatars={[
    { value: "A" },
    { value: "B" },
    { value: "C" },
  ]}
/>

<AvatarGroup
  size="m"
  reverse
  avatars={[
    { value: "A" },
    { value: "B" },
    { value: "C" },
  ]}
/>

Mixed types

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

Mixed

<AvatarGroup
  size="m"
  avatars={[
    { src: "/images/avatar.jpg" },
    { value: "B" },
    { empty: true },
    { value: "D", statusIndicator: { color: "green" } }
  ]}
/>

API reference

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