Propel

Avatar

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

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

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

Installation

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

Usage

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

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

Examples

Sizes

size is an optical ramp of eight steps — 2xs 16 / xs 20 / sm 24 / md 28 / lg 32 / xl 40 / 2xl 56 / 3xl 64 px — not the control ladder. The four middle steps happen to agree with the ladder’s labels; the extremes are Avatar’s own. md is the default, and inside an AvatarGroup the group’s size wins unless an avatar sets its own.

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

const SIZES: AvatarSize[] = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];

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

Variants

The initials background variant is derived stably from alt (falling back to the initials themselves), so every member gets a consistent color automatically — it is not a consumer prop.

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

const MEMBERS = [
  { alt: "Aarav Sharma", fallback: "AS" },
  { alt: "Brenda Lee", fallback: "BL" },
  { alt: "Chen Wei", fallback: "CW" },
  { alt: "Diya Patel", fallback: "DP" },
  { alt: "Elena Garcia", fallback: "EG" },
  { alt: "Farhan Khan", fallback: "FK" },
];

export default function VariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {MEMBERS.map(({ alt, fallback }) => (
        <Avatar key={alt} size="lg" alt={alt} fallback={fallback} />
      ))}
    </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 size="lg" alt="Ada Lovelace" fallback="AL" src="https://i.pravatar.cc/128?img=47" />
      <Avatar size="lg" alt="Ada Lovelace" fallback="AL" />
      <Avatar size="lg" alt="Ada Lovelace" />
    </div>
  );
}

API Reference

Avatar

The ready-made avatar: an image that falls back to initials (or an anonymous person icon), composed from the `elements/avatar` parts (`Avatar` root + `AvatarImage` + `AvatarFallback`). Pass `src` for the photo and `fallback` for initials; the initials color is chosen automatically and is not a consumer prop.

PropTypeDefaultDescription
renderReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>—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.
size"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl""md"Avatar size. Optional here — resolved from the `AvatarGroup` context, else `md`.
srcstring—Image URL. When omitted, or while it is loading/failing, the fallback shows.
altstring—Accessible name for the avatar (the person it represents).
fallbackReactNode—Initials shown when there is no image. When omitted too, a person icon shows.
delaynumber—Milliseconds before the fallback shows, to avoid a flash while `src` loads quickly.