Propel

Workspace Avatar

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

Basic

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

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

Magnitudes

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

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

Tones

The initials fall back to a tone palette shared with Avatar. When tone is omitted it is derived stably from alt.

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

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

States

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
        magnitude="lg"
        alt="Plane workspace"
        fallback="PV"
        src="https://avatars.githubusercontent.com/u/73642778?s=128"
      />
      <WorkspaceAvatar magnitude="lg" alt="Plane workspace" fallback="PV" />
    </div>
  );
}

Installation

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

Props

WorkspaceAvatar

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"Yes
srcstringNoWorkspace logo URL. Falls back to the initial when absent/loading/failed.
altstringNoAccessible name for the workspace avatar.
fallbackReactNodeNoShown when there is no logo — typically the workspace's initial.
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.