AvatarGroup – Once UI

AvatarGroup lays out a list of avatars in a row, each one overlapping the one before it by the 8 spacing step. Each entry in avatars takes the same props as Avatar. It extends Flex props, so spacing and alignment work as on any Flex. See the web AvatarGroup page for the web version.

AvatarGroup

import { AvatarGroup } from "@once-ui-system/native";

export function Team() {
return (
  <AvatarGroup
    avatars={[
      { src: "https://example.com/ada.jpg", value: "Ada" },
      { value: "BK" },
      { value: "CM" },
    ]}
  />
);
}

Sizes

size sets every avatar in the group. It takes a t-shirt size.

Sizes

import { AvatarGroup, Column } from "@once-ui-system/native";

const avatars = [{ value: "AB" }, { value: "CD" }, { value: "EF" }];

export function Sizes() {
return (
  <Column gap="16">
    <AvatarGroup size="s" avatars={avatars} />
    <AvatarGroup size="m" avatars={avatars} />
    <AvatarGroup size="l" avatars={avatars} />
  </Column>
);
}

Limit and reverse

limit shows that many avatars and collapses the rest into one +n avatar. By default each avatar sits over the one before it; reverse stacks each one under the one before it instead.

Limit and reverse

import { AvatarGroup } from "@once-ui-system/native";

const avatars = [
{ value: "AB" },
{ value: "CD" },
{ value: "EF" },
{ value: "GH" },
{ value: "IJ" },
];

export function Attendees() {
return <AvatarGroup avatars={avatars} limit={3} reverse />;
}

API reference

AvatarGroup extends Flex props, so spacing, alignment and the rest apply.

Prop	Type	Default	Description
avatars	AvatarProps[]		The avatars to show. Required.
size	"xs" \| "s" \| "m" \| "l" \| "xl"	"m"	The size of every avatar. An avatar's own size wins.
limit	number		Avatars shown before the rest collapse into a +n avatar.
reverse	boolean	false	Stacks each avatar under the one before it instead of over it.