Avatar

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

At 2xs (16px), derived initials and string fallback values display only their first Unicode grapheme. Larger sizes retain their initials. Custom React fallback content is rendered as supplied; keep it suitable for the available space.

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.

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.

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. Content resolves in that fixed order, so a photo that fails to load drops to initials rather than leaving a broken frame.

Initials are derived from alt when you don’t pass fallback — up to two characters, the first letter of the first and last name token, uppercased. A single-token name yields one letter. The anonymous icon is reached only when no name resolves at all.

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" />
    </div>
  );
}

With tooltip

Pass tooltip to show the person’s name on hover. true reuses alt; a string is the label and works without alt.

An avatar stays presentational either way: a tooltip does not put it in the tab order. When the avatar is genuinely interactive — opening a profile, a menu, a member picker — wrap it in a button or link and let the wrapper own focus, so the focus ring is not clipped by the circular mask.

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

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

Interactive avatar

Put the tooltip on the actionable wrapper so keyboard focus reveals the same information as hover. The wrapper owns the accessible action name and a target of at least 24px; the avatar inside is decorative. Connect the button’s onClick to the consumer’s profile action.

import { Avatar } from "@makeplane/propel/components/avatar";
import { IconButton } from "@makeplane/propel/components/icon-button";

export default function InteractiveDemo() {
  return (
    <IconButton
      variant="ghost"
      size="sm"
      aria-label="Open Ada Lovelace’s profile"
      icon={<Avatar size="xs" fallback="AL" />}
    />
  );
}

Consumer tabIndex is forwarded for compatibility, but avoid adding tab stops to avatar artwork, especially decorative aria-hidden avatars. Put interaction, focus and tooltip semantics on a named button or link wrapper.

Migration guidance is maintained in the 0.5.0 changelog entry.

API Reference