# Workspace Avatar

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

## Installation

```tsx
import { WorkspaceAvatar } from "@makeplane/propel/components/workspace-avatar";
```
## Usage

```tsx
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](/components/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.

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

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

```tsx
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>
  );
}
```

### With tooltip

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

```tsx
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

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

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` (required) | `"2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl"` | — |  |
| `render` | `ReactElement<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. |
| `src` | `string` | — | Workspace logo URL. Falls back to the initial when absent/loading/failed. |
| `alt` | `string` | — | Accessible name for the workspace avatar. |
| `fallback` | `ReactNode` | — | Shown when there is no logo. When omitted, derives up to two initials from `alt`; without a name, shows the anonymous workspace icon. |
| `delay` | `number` | — | Milliseconds before the fallback shows, to avoid a flash while `src` loads quickly. |
| `tooltip` | `string \| boolean` | — | Name shown in a tooltip on hover. Pass `true` to reuse `alt`, or a string for the label (works without `alt`). Omit for no tooltip. |