Organisms

Account chip

A page-level account picker. It narrows the current view to one account within the scope already set by the GlobalChip. The compact button shows the active account, a favorite star, and a caret; clicking opens a searchable list split into the active group and standalone accounts.

Updated Jul 27, 2026 by Juan Pablo Turina

Live preview

import { AccountChip } from "@/components/organisms/account-chip";

<AccountChip />

Anatomy

The chip button is a scope avatar (account tone) + account name + favorite Star + CaretDown. Clicking opens a 320px panel: a search field, then the account list grouped by the active group and Standalone, closing with an info note that points back to the GlobalChip.

1
Account avatar
Size-5 cyan circle with the account's initial (the account scope color).
2
Favorite star
Star toggles the account as a favorite. Filled blue-600 when starred, light muted when not.
3
Search
Filters the list by account name. Not auto-focused on open, so the keyboard doesn't jump.
4
Group + Standalone sections
Accounts in the active group first, then standalone accounts. Each row is a ScopeRow (checkbox + avatar + name + region). Single-select.
5
Scope note
Info footer: 'Scoped to your organization. Change it in the global chip.' The org scope is owned by the GlobalChip, not here.

Single-select account, inside the scope

AccountChip narrows the current page to one account inside the scope already applied by GlobalChip. It never changes the organization or the group — those live in GlobalChip. Users can also favorite the active account via the Star. Multi-select is not supported by design.

Common configurations

Three canonical ways the AccountChip shows up next to a page title or at the far right of a section header: the default demo shape, a merchant with real accounts split into a group and standalone lists, and a controlled configuration with onSelect + onStarChange wired to the host.

Default chip (demo accounts)

Zero-config drop-in. Renders the default Brazil ops group with three accounts + three standalone accounts. Use in any prototype that needs the chip visible but doesn't model real data yet.

import { AccountChip } from "@/components/organisms/account-chip";

<AccountChip />

Real merchant accounts

Pass groupLabel + groupAccounts[] + standaloneAccounts[] to reflect the accounts inside the currently-scoped group. Use for prototypes that need to feel accurate — real account names, real regions.

<AccountChip
  groupLabel="Brazil ops"
  groupAccounts={[
    { key: "tiendamia-br", label: "Tiendamia BR", meta: "Brazil" },
    { key: "shopee-br", label: "Shopee BR", meta: "Brazil" },
  ]}
  standaloneAccounts={[
    { key: "rappi-co", label: "Rappi CO", meta: "Colombia" },
  ]}
  activeAccount="tiendamia-br"
/>

Fully controlled (onSelect + onStarChange)

Attach onSelect to navigate on account change (e.g. router.push(`/accounts/${key}`)) and onStarChange to persist the favorite. Use in prototypes that need to prove the write-side flow, not just the read.

Controlled selection with onSelect + onStarChange wired to the host.

<AccountChip
  activeAccount="tiendamia-br"
  onSelect={(key) => router.push(`/accounts/${key}`)}
  onStarChange={(starred) => persistFavorite(starred)}
/>

Import

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

Also re-exports the shared { AccountNode } type for account data.

import { AccountChip } from "@/components/organisms/account-chip";

Props

AccountChip is a controlled-friendly wrapper: pass data (groupLabel, groupAccounts, standaloneAccounts, activeAccount, defaultStarred) to model real state, and handlers (onSelect, onStarChange) to wire it to the host. Defaults render a self-contained demo so the chip works with zero props.

Prop	Type	Default	Description
groupLabel	string	"Brazil ops"	Title of the first section — usually the active group name.
groupAccounts	AccountNode[]	—	Accounts that belong to the active group. Each { key, label, meta } renders as a ScopeRow.
standaloneAccounts	AccountNode[]	—	Accounts not tied to a group. Renders below groupAccounts under the Standalone section.
activeAccount	string	—	Key of the currently-selected account. Defaults to the first key in groupAccounts.
defaultStarred	boolean	true	Whether the active account starts as a favorite (blue-600 filled Star).
onSelect	(key: string) => void	—	Fires whenever the user picks a different account. Closes the panel immediately.
onStarChange	(starred: boolean) => void	—	Fires whenever the user toggles the favorite Star on the active account.
className	string	—	Merged onto the outer trigger via cn(). Layout (h-9, rounded-md, border) is canonical.

When to use

On a page that operates on a single account, to switch which account is in view.
Next to the GlobalChip when users need a quick account jump without re-opening the full scope tree.
Any header row where the active account must stay visible.

When not to use

To change the organization or group scope — that's the GlobalChip.
For profile actions — use AccountMenu.
For multi-account selection — the AccountChip is single-select by design.

Usage

Keep the info footer — it tells users where the org scope actually lives.
Close the chip on selection; the choice commits immediately.
Keep the star reserved for favoriting, not for any other action.

Don't

Don't auto-focus the search on open.
Don't duplicate the GlobalChip's org/group controls here.
Don't turn it into a multi-select — one account is the whole point.

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

Global chipEnvironment + organization + group scope switcher. AccountChip lives within the scope GlobalChip has already applied.
Top barShell chrome that typically hosts the GlobalChip; AccountChip sits below it on the page.
Account menuProfile actions (Your profile, Security, Log out). Never mix these into AccountChip.
PopoverThe floating panel primitive under the hood.
AvatarPowers the account initial in the trigger and every account row.