primitives

OrgAvatar

Rounded-square initial chip identifying a workspace, organization, or any account-scope entity. Round avatars are for people; square avatars are for scopes.

OrgAvatar derives a single uppercase letter from the entity's name. Empty / whitespace names fall back to `?`. Three sizes — pick `default` (24px) for topbars, `sm` (20px) for dense rows, `lg` (32px) for cards.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/org-avatar.json

Or import from the workspace package:

import { OrgAvatar } from "@8maverik8/design";

Examples

Sizes

<OrgAvatar size="sm" name="Acme" />
<OrgAvatar name="Acme" />
<OrgAvatar size="lg" name="Acme" />

Different names

<OrgAvatar name="Parametric" />
<OrgAvatar name="Supertest" />
<OrgAvatar name="OAPPS Studio" />

Variants

size

default(default)24px — topbar OrgSwitcher trigger, switcher list rows.
sm20px — member tables, invite rows.
lg32px — profile / workspace cards.

Anatomy

OrgAvatarA `<span>` chip — `bg-foreground` square with the initial letter in `text-background`. `aria-hidden` because the surrounding label already names the entity.

Guidelines

Pair with the entity name as accessible text — OrgAvatar itself is `aria-hidden`.Screen readers should hear the workspace name, not the letter — the letter is decoration.
Use OrgAvatar for people.Use `Avatar` (round) for users. The square shape carries semantic meaning — it's a scope, not a person.
Always feed the live entity name (not a stored initial).If the workspace is renamed, the letter follows. Storing an `initial` field separately is a sync hazard.