Workspace Avatar

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

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

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 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.

PPVPVPVPVPVPVPV

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.

As with Avatar, initials are derived from alt when fallback is omitted, so the anonymous glyph is reached only when no name resolves either.

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

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

Show code

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

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

API Reference