Avatar Group

An overlapping stack of avatars that share one size and show a "+N" overflow count.

Basic

ALGHLT+4

Show code

import { Avatar } from "@makeplane/propel/components/avatar";
import { AvatarGroup } from "@makeplane/propel/components/avatar-group";

export default function BasicDemo() {
  return (
    <AvatarGroup magnitude="sm">
      <Avatar alt="Ada Lovelace" fallback="AL" src="https://i.pravatar.cc/64?img=47" />
      <Avatar alt="Grace Hopper" fallback="GH" src="https://i.pravatar.cc/64?img=32" />
      <Avatar alt="Linus Torvalds" fallback="LT" />
      <Avatar alt="4 more members" fallback="+4" />
    </AvatarGroup>
  );
}

Magnitudes

magnitude on the group sizes every avatar at once — the children don’t set it. Groups support the three Figma sizes: 2xs, xs, and sm.

ALGHLT

Show code

import { Avatar } from "@makeplane/propel/components/avatar";
import { AvatarGroup, type AvatarGroupMagnitude } from "@makeplane/propel/components/avatar-group";

const MAGNITUDES: AvatarGroupMagnitude[] = ["2xs", "xs", "sm"];

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      {MAGNITUDES.map((magnitude) => (
        <AvatarGroup key={magnitude} magnitude={magnitude}>
          <Avatar alt="Ada Lovelace" fallback="AL" src="https://i.pravatar.cc/64?img=47" />
          <Avatar alt="Grace Hopper" fallback="GH" src="https://i.pravatar.cc/64?img=32" />
          <Avatar alt="Linus Torvalds" fallback="LT" />
        </AvatarGroup>
      ))}
    </div>
  );
}

Fallbacks

An avatar shows its photo when a src is available, falls back to initials when it isn’t, and finally to an anonymous person icon when no initials are given either.

ALGH

Show code

import { Avatar } from "@makeplane/propel/components/avatar";
import { AvatarGroup } from "@makeplane/propel/components/avatar-group";

export default function FallbacksDemo() {
  return (
    <AvatarGroup magnitude="sm">
      {/* Photo, when a `src` is available. */}
      <Avatar alt="Ada Lovelace" fallback="AL" src="https://i.pravatar.cc/64?img=47" />
      {/* No image — falls back to initials, tinted from the member's name. */}
      <Avatar alt="Grace Hopper" fallback="GH" />
      {/* No image and no initials — falls back to an anonymous person icon. */}
      <Avatar alt="Unassigned member" />
    </AvatarGroup>
  );
}

Tones

Initials avatars take a tone for their background color; when omitted, a stable color is derived from the member’s name.

DSENPRRSMK

Show code

import { Avatar } from "@makeplane/propel/components/avatar";
import { AvatarGroup } from "@makeplane/propel/components/avatar-group";

export default function TonesDemo() {
  return (
    <AvatarGroup magnitude="sm">
      <Avatar alt="Design" fallback="DS" tone="orange" />
      <Avatar alt="Engineering" fallback="EN" tone="indigo" />
      <Avatar alt="Product" fallback="PR" tone="emerald" />
      <Avatar alt="Research" fallback="RS" tone="purple" />
      <Avatar alt="Marketing" fallback="MK" tone="pink" />
    </AvatarGroup>
  );
}

Installation

import { Avatar } from "@makeplane/propel/components/avatar";
import { AvatarGroup } from "@makeplane/propel/components/avatar-group";

Props

AvatarGroup

Prop	Type	Required	Description
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, {}>	No	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
magnitude	"2xs" \| "xs" \| "sm"	Yes	Shared size for every avatar in the group; an avatar's own `magnitude` overrides it.

Avatar

Prop	Type	Required	Description
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, {}>	No	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
magnitude	"2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl"	No	Avatar size. Optional here — resolved from the `AvatarGroup` context, else `md`.
src	string	No	Image URL. When omitted, or while it is loading/failing, the fallback shows.
alt	string	No	Accessible name for the avatar (the person it represents).
fallback	ReactNode	No	Initials shown when there is no image. When omitted too, a person icon shows.
tone	"orange" \| "indigo" \| "emerald" \| "crimson" \| "pink" \| "purple"	No	Initials background color. Defaults to a stable color derived from `alt`.
delay	number	No	Milliseconds before the fallback shows, to avoid a flash while `src` loads quickly.