OrgMark

Hero example

When to use

Reach for OrgMark when you need a compact organisation identity — the sidebar header trigger ("⌘O to switch organisations"), the org-switcher drawer rows, dashboard breadcrumb prefixes, and audit-log activity rows where the actor is an organisation rather than a person. The mark is a rounded square (radius scales with size) carrying two-letter initials in mono on a role-colored background.

Don't reach for OrgMark for individual users — that's an avatar component (consumer responsibility; not in @matter/components yet). Don't use it for non-org identities either; the --role-* token family is org-specific.

Anatomy

A single <span class="m-orgmark"> with inline-grid placement that centers the initials inside the swatch. Geometry:

• Width and height equal size (default 26).
• Border radius is max(4, round(size × 0.18)) — keeps the square visually rounded at every size.
• Background reads var(--{accent}, var(--accent, #DDDCD8)).
• Foreground reads var(--paper-50, var(--background, #FAFAF9)).
• Initials render in Geist Mono at 40% of size, weight 600.

aria-label="Organisation {name}" makes the swatch accessible without showing the full name visually.

Props

org.accent is the CSS variable name minus the -- prefix ("role-peach" resolves to var(--role-peach)). If the token isn't defined, the mark falls back to --accent and then to #DDDCD8.

States

Stateless.

Density

OrgMark is sized via the size prop, not via the site density toggle. Typical sizes:

Themes

In dark, the foreground --paper-50 adapts; the role-color background retains saturation. In forced-colors, the swatch collapses to Highlight with HighlightText.

Tokens consumed

Background reads any --role-* token (peach, sage, amber, lavender, etc., depending on which roles the brand has wired). Foreground reads --paper-50. Fallbacks: --accent, --background, #FAFAF9.

Accessibility

• Keyboard interactions. None on the swatch. Wrapper elements supply interactivity.
• ARIA roles and properties. aria-label="Organisation {name}" carries the accessible identity. Initials are visual only.
• Focus order. N/A.
• Screen-reader expectations. Announces the org name (full, not initials). Wrapped buttons announce as "{org name}, button."
• Reduced motion. N/A.
• Forced colors. Accent → Highlight; initials → HighlightText.
• WIG rules. aria-label over the swatch (icon-only rule, since the initials are visual). user-select: none prevents the initials from being draggable text. Role-color choice via token (no inline hex).

Do / Don't

Recipes

This component appears in:

• Dashboard sidebar headers.
• The org-switcher drawer.
• Audit-log activity rows when the actor is an organisation.

Code example

import { OrgMark } from "@matter/components";

export function SidebarOrgTrigger({ org }: { org: Organisation }) {
  return (
    <button type="button" className="sidebar-org-trigger" onClick={openOrgSwitcher}>
      <OrgMark org={{ name: org.legal_name, initials: org.initials, accent: org.role_color }} />
      <span>{org.display_name}</span>
    </button>
  );
}

Source