Propel

Workspace Avatar

Shows a workspace's logo in a rounded square, falling back to its colored initials.

PV
Show code
import { WorkspaceAvatar } from "@makeplane/propel/components/workspace-avatar";

export default function BasicDemo() {
  return (
    <WorkspaceAvatar
      size="md"
      alt="Plane workspace"
      fallback="PV"
      src="https://avatars.githubusercontent.com/u/73642778?s=128"
    />
  );
}

Installation

import { WorkspaceAvatar } from "@makeplane/propel/components/workspace-avatar";

Usage

import { WorkspaceAvatar } from "@makeplane/propel/components/workspace-avatar";

export default function BasicDemo() {
  return (
    <WorkspaceAvatar
      size="md"
      alt="Plane workspace"
      fallback="PV"
      src="https://avatars.githubusercontent.com/u/73642778?s=128"
    />
  );
}

Examples

Sizes

size tracks Avatar step for step — 2xs 16 / xs 20 / sm 24 / md 28 / lg 32 / xl 40 / 2xl 56 / 3xl 64 px — so a workspace and a person line up at the same rung. Only the corner radius differs, squaring off as the avatar grows.

PVPVPVPVPVPVPVPV
Show code
import {
  WorkspaceAvatar,
  type WorkspaceAvatarSize,
} from "@makeplane/propel/components/workspace-avatar";

const SIZES: WorkspaceAvatarSize[] = ["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) => (
        <WorkspaceAvatar key={size} size={size} alt="Plane workspace" fallback="PV" />
      ))}
    </div>
  );
}

Variants

The initials fall back to a variant palette shared with Avatar, derived stably from alt — it is not a consumer prop.

PAGIUH
Show code
import { WorkspaceAvatar } from "@makeplane/propel/components/workspace-avatar";

const WORKSPACES = [
  { alt: "Plane", fallback: "P" },
  { alt: "Acme Corp", fallback: "A" },
  { alt: "Globex", fallback: "G" },
  { alt: "Initech", fallback: "I" },
  { alt: "Umbrella", fallback: "U" },
  { alt: "Hooli", fallback: "H" },
];

export default function VariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {WORKSPACES.map(({ alt, fallback }) => (
        <WorkspaceAvatar key={alt} size="lg" alt={alt} fallback={fallback} />
      ))}
    </div>
  );
}

States

The three fallback states side by side: logo, initials, and the anonymous workspace icon.

PVPV
Show code
import { WorkspaceAvatar } from "@makeplane/propel/components/workspace-avatar";

export default function StatesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <WorkspaceAvatar
        size="lg"
        alt="Plane workspace"
        fallback="PV"
        src="https://avatars.githubusercontent.com/u/73642778?s=128"
      />
      <WorkspaceAvatar size="lg" alt="Plane workspace" fallback="PV" />
      <WorkspaceAvatar size="lg" alt="Plane workspace" />
    </div>
  );
}

API Reference

WorkspaceAvatar

The ready-made workspace avatar: a logo that falls back to initials, or an anonymous workspace icon when there are no initials either, composed from the `elements/workspace-avatar` parts (`WorkspaceAvatar` root + `WorkspaceAvatarImage` + `WorkspaceAvatarFallback`). Pass `src` for the logo and `fallback` for initials; the initials color is chosen automatically and is not a consumer prop.

PropTypeDefaultDescription
size(required)"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"—
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.
srcstring—Workspace logo URL. Falls back to the initial when absent/loading/failed.
altstring—Accessible name for the workspace avatar.
fallbackReactNode—Shown when there is no logo — typically the workspace's initial. When omitted too, an anonymous workspace icon shows.
delaynumber—Milliseconds before the fallback shows, to avoid a flash while `src` loads quickly.