Organisms

Global chip

Environment + scope switcher. The compact button lives in the TopBar; clicking opens a menu with two radio-like sections: Environment (Live / Test / Sandbox) and Accounts (org or account picker), plus a Manage accounts footer.

Updated Jul 10, 2026 by Leonardo Posada

Live preview

import { GlobalChip } from "@/components/organisms/global-chip";

<GlobalChip />

Anatomy

The chip button is DotOutline (env tone) + label + vertical separator + scope avatar (Buildings for org, Storefront for account) + label + CaretDown. The menu panel is w-72 with two sections divided by a border, each led by a 10px uppercase caption.

  1. 1
    Environment dot

    DotOutline fill in the tone color (primary=live, success=test/sandbox, muted=off). Same convention repeats inside the menu rows.

  2. 2
    Scope avatar

    Size-5 primary circle with the scope icon (Buildings for organization, Storefront for account) filled.

  3. 3
    Menu — Environment section

    Header 'ENVIRONMENT' (10px uppercase muted) + radio rows. Active row shows a light Check on the right.

  4. 4
    Menu — Accounts section

    Header 'ACCOUNTS' + rows with scope avatar + name + active check. Clicking commits and closes the menu.

  5. 5
    Manage accounts footer

    Border-t separator + primary text link. Meant to open the accounts management page in the real Dashboard.

When to use

  • Inside the TopBar as the environment + account switcher.
  • Standalone in any header row where scope needs to be visible.
  • When a flow needs to prove context (which env / which account) at all times.

When not to use

  • For user profile actions — use AccountMenu.
  • As a menu of unrelated actions — GlobalChip is context-only.
  • For a single-account prototype where there's nothing to switch — hide it via showGlobalChip={false}.

Usage

Do
  • Keep both sections visible even if there's only one option — hierarchy first.
  • Show a Check on the active row of each section for clarity.
  • Close the menu on account selection, but keep it open on environment change (users often want to review both before committing).
  • Reflect the active environment tone on the chip button — that's the single glanceable cue.
Don't
  • Don't add search inside the chip menu — if lists get long, promote to Manage accounts.
  • Don't rename ENVIRONMENT to 'Mode' or 'State' — the label is canonical across Yuno docs.
  • Don't skip the Manage accounts footer — it's the escape hatch for lists that don't fit.

Composition

GlobalChip is self-contained (owns its own open state, environment selection, and account selection). Drop it inside the TopBar right slot, or standalone in any header row when scope matters.

Controlled environments + accounts + Manage accounts action.
<GlobalChip
  environments={[
    { key: "live", label: "Live", tone: "live" },
    { key: "sandbox", label: "Sandbox", tone: "sandbox" },
  ]}
  activeEnvironment="live"
  onEnvironmentChange={(key) => setEnv(key)}
  accounts={[
    { key: "tiendamia-br", label: "Tiendamia BR", type: "organization" },
    { key: "tiendamia-ar", label: "Tiendamia AR", type: "organization" },
    { key: "team-lead-personal", label: "Julián (personal)", type: "account" },
  ]}
  activeAccount="tiendamia-br"
  onAccountChange={(key) => router.push(`/accounts/${key}`)}
  onManageAccounts={() => router.push("/settings/accounts")}
/>