Organisms

Global chip

Environment + scope switcher. The compact button lives in the TopBar; clicking opens a panel to pick the environment (Live / Test) and the account scope — the whole organization, a group, or specific accounts — committed with Apply.

Updated Jul 18, 2026 by Leonardo Posada

Live preview

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

<GlobalChip />

Anatomy

The chip button is an environment dot + label + vertical separator + scope avatar + label + CaretDown. The 380px panel stacks a fixed top (Environment toggle + Search), a scrollable scope tree (Organization / Recent / Groups / Accounts), and a fixed footer (count + Save as group + Cancel / Apply).

1
Environment dot
DotOutline in the tone color: success (green) for Live, amber for Test. The one place Yuno uses weight bold.
2
Scope avatar
Size-5 identity circle: violet Buildings for organization, blue Stack for group, cyan initial for account.
3
Environment toggle
Segmented Live / Test control at the top of the panel. The active side gets the muted fill.
4
Scope tree
Organization (whole-org checkbox), Recent, Groups (+ Add group), Accounts. Checking Organization selects everything and disables the rest.
5
Footer
Live account count + 'Save current selection as group' (group blue) + Cancel / Apply. Apply commits the draft to the chip.

One chip, one job — environment + scope

GlobalChip is the only place users switch environment (Live / Test) or move across organizations / groups / accounts. Anything profile-related (Your profile, Security, Settings, Log out) lives in AccountMenu; anything about switching accounts within an already-scoped view lives in AccountChip. Keep the chip context-only.

Common configurations

Four canonical ways the GlobalChip shows up inside Yuno prototypes: the default demo shape, a real merchant's scope tree, the Test-mode variant, and a fully controlled configuration with Apply / Save as group handlers wired to the host.

Default chip (demo scope)

Zero-config drop-in. Renders the default Tiendamia scope with 5 groups and 5 standalone accounts. Use in any prototype that needs the chip visible but doesn't model real data yet.

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

<GlobalChip />

Real merchant scope tree

Pass organizationLabel + groups[] + accounts[] + recentKeys to reflect a real merchant. Use for prototypes that need to feel accurate (real names, real group structure) or for demos to specific merchants.

<GlobalChip
  organizationLabel="Tiendamia"
  organizationAccounts={14}
  groups={[
    { key: "brazil-ops", label: "Brazil ops", accounts: 4 },
    { key: "andean", label: "Andean", accounts: 4 },
  ]}
  accounts={[
    { key: "tiendamia-br", label: "Tiendamia BR", meta: "Brazil" },
    { key: "tiendamia-ar", label: "Tiendamia AR", meta: "Argentina" },
  ]}
  recentKeys={["brazil-ops", "tiendamia-br"]}
/>

Test-mode default

Set defaultEnv='test' so the chip opens in Sandbox on load. Wire onEnvironmentChange to swap the API keys the prototype talks to. Use for onboarding, integration flows, and sandbox demos.

<GlobalChip
  defaultEnv="test"
  onEnvironmentChange={(env) => swapApiKeys(env)}
/>

Fully controlled (Apply + Save as group)

Attach onApply to commit the draft scope to the host and onSaveAsGroup to persist the current selection as a reusable group. Use in prototypes that need to prove the write-side flow, not just the read.

Controlled scope model with onApply, onSaveAsGroup and onAddGroup wired to the host.

<GlobalChip
  organizationLabel="Tiendamia"
  onApply={({ env, organization, keys }) =>
    applyScope({ env, organization, keys })
  }
  onSaveAsGroup={() => openSaveGroupDialog()}
  onAddGroup={() => openAddGroupDialog()}
/>

Import

Copy this import at the top of the file. GlobalChip is self-contained — no provider or context needed at the app root. It ships with demo data by default, so it renders on its own.

Also exports the shared { AccountNode, GroupNode } types for scope data.

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

Props

GlobalChip is a controlled-friendly wrapper: pass data (organizationLabel, groups, accounts, recentKeys) to model real scope, and handlers (onApply, onEnvironmentChange, onSaveAsGroup, onAddGroup) to wire it to the host. Defaults render a self-contained demo scope so the chip works with zero props.

Prop	Type	Default	Description
organizationLabel	string	"Tiendamia"	Display name for the whole-org scope shown at the top of the panel.
organizationAccounts	number	14	Total number of accounts under the organization. Shown next to the org label.
groups	GroupNode[]	—	Groups the user can scope to. Each { key, label, accounts } renders as a checkbox row under the Groups section.
accounts	AccountNode[]	—	Standalone accounts (not tied to a group). Each { key, label, meta } renders as a checkbox row under the Accounts section.
recentKeys	string[]	—	Keys shown under the Recent section. Matched against both groups and standalone accounts.
defaultEnv	"live" \| "test"	"live"	Which environment the chip opens on. Live = success dot, Test = amber dot.
onEnvironmentChange	(env: EnvKind) => void	—	Fires on every environment toggle change. The host wires the real API-key swap here.
onApply	(selection: { env, organization, keys }) => void	—	Fires when the user commits the draft scope with the Apply button. Selection carries the new env, whether the whole organization is selected, and the list of keys.
onSaveAsGroup	() => void	—	Fires when the user hits 'Save current selection as group'. The host opens the naming dialog.
onAddGroup	() => void	—	Fires from the '+ Add group' row inside the Groups section. The host opens the new-group dialog.
className	string	—	Merged onto the outer trigger via cn(). Layout (h-9, rounded-md, border) is canonical.

When to use

Inside the TopBar as the environment + account-scope switcher.
When a flow needs to prove context (which env / which scope) at all times.
When users work across many accounts or groups and need to narrow the view.

When not to use

For user profile actions — use AccountMenu.
For a quick single-account jump on a page — use AccountChip.
As a menu of unrelated actions — GlobalChip is context-only.

Usage

Reflect the applied environment and scope on the chip button — it's the glanceable cue.
Commit changes with Apply; let Cancel discard the draft.
Use the org checkbox to mean 'everything' and disable the rest while it's on.

Don't

Don't auto-focus the search when the panel opens.
Don't use red anywhere in here — deletes and destructive states live elsewhere.
Don't mix profile or notification actions into the scope panel.

Cross-links to atoms and patterns you may reach for next.

Account chipPage-level single-select account picker inside the scope already applied by GlobalChip.
Top barThe shell chrome that hosts the GlobalChip in its right slot.
Account menuProfile actions (Your profile, Security, Log out). Never mix these into GlobalChip.
SidebarLeft rail navigation. Pair with Top bar + GlobalChip to form the full shell.
PopoverThe floating panel primitive under the hood.
ColorsEnvironment dot uses text-success for Live and text-amber-500 as a stopgap for Test until --warning ships.