Propel

Avatar

Shows a person's photo, falling back to initials or an anonymous person icon.

Basic

AL
Show code
import { Avatar } from "@makeplane/propel/components/avatar";

export default function BasicDemo() {
  return (
    <Avatar
      magnitude="md"
      alt="Ada Lovelace"
      fallback="AL"
      src="https://i.pravatar.cc/128?img=47"
    />
  );
}

Magnitudes

ALALALALALALALAL
Show code
import { Avatar, type AvatarMagnitude } from "@makeplane/propel/components/avatar";

const MAGNITUDES: AvatarMagnitude[] = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {MAGNITUDES.map((magnitude) => (
        <Avatar key={magnitude} magnitude={magnitude} alt="Ada Lovelace" fallback="AL" />
      ))}
    </div>
  );
}

Tones

The initials background follows tone. When tone is omitted it is derived from alt, so every member gets a stable color automatically.

OIECPP
Show code
import { Avatar, AVATAR_TONES } from "@makeplane/propel/components/avatar";

export default function TonesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {AVATAR_TONES.map((tone) => (
        <Avatar key={tone} magnitude="lg" tone={tone} fallback={tone[0]?.toUpperCase()} />
      ))}
    </div>
  );
}

States

The three fallback states side by side: photo, initials, and the anonymous person icon.

ALAL
Show code
import { Avatar } from "@makeplane/propel/components/avatar";

export default function StatesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Avatar
        magnitude="lg"
        alt="Ada Lovelace"
        fallback="AL"
        src="https://i.pravatar.cc/128?img=47"
      />
      <Avatar magnitude="lg" alt="Ada Lovelace" fallback="AL" />
      <Avatar magnitude="lg" alt="Ada Lovelace" />
    </div>
  );
}

Installation

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

Props

Avatar

PropTypeRequiredDescription
renderReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>NoAllows 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"NoAvatar size. Optional here — resolved from the `AvatarGroup` context, else `md`.
srcstringNoImage URL. When omitted, or while it is loading/failing, the fallback shows.
altstringNoAccessible name for the avatar (the person it represents).
fallbackReactNodeNoInitials shown when there is no image. When omitted too, a person icon shows.
tone"orange" | "indigo" | "emerald" | "crimson" | "pink" | "purple"NoInitials background color. Defaults to a stable color derived from `alt`.
delaynumberNoMilliseconds before the fallback shows, to avoid a flash while `src` loads quickly.