Organisms

Preview context bar

The context toolbar above a checkout / SDK preview. It sets the params the preview is simulated against: the account (via the Account chip) + checkout (via the Checkout select) on the left; the device viewport, country, currency, and amount on the right. Country auto-cascades the currency (BR to BRL, etc.).

Updated Jul 27, 2026 by Juan Pablo Turina

Live preview

import { PreviewContextBar } from "@/components/organisms/preview-context-bar";

<PreviewContextBar onChange={(ctx) => setPreviewContext(ctx)} />

Anatomy

A slim bar (64px rhythm) that scrolls horizontally on narrow panes. Left: Account chip + Checkout select. Right: a segmented device toggle, a divider, then Country + Currency + Amount as one tight group.

1
Account chip
The account picker (reused organism), 164px in the bar.
2
Checkout select
The checkout picker (reused organism), 164px in the bar.
3
Device toggle
Segmented Desktop / Mobile ToggleGroup — the preview viewport.
4
Country + Currency + Amount
One conceptual group (8px gap). Picking a country auto-sets the currency; amount is a number input.

Overflow

The bar never wraps. On a narrow preview pane it scrolls horizontally (no visible scrollbar), keeping every control on one row.

Import

Copy this import at the top of the file. PreviewContextBar is self-contained — it ships demo data + internal state and reports the full context via onChange.

Composes AccountChip + CheckoutSelect + Select + ToggleGroup + Input. Self-contained — ships demo data + internal state.

import { PreviewContextBar } from "@/components/organisms/preview-context-bar";

Props

PreviewContextBar manages its own state and reports the full context on every change. Pass option lists / defaults to model real data.

Prop	Type	Default	Description
countries	Option[]	US / BR / MX / AR	Country options.
currencies	Option[]	USD / BRL / MXN / ARS	Currency options.
defaultCountry	string	'US'	Initial country (also seeds the currency).
defaultCurrency	string	from country	Override the initial currency.
defaultAmount	number \| ''	''	Initial amount.
defaultViewport	'desktop' \| 'mobile'	'desktop'	Initial device viewport.
onChange	(ctx: PreviewContext) => void	—	Fires with the full context { account, checkout, country, currency, amount, viewport } on every change.
className	string	—	Merged onto the bar.

When to use

Directly above a checkout / SDK preview, to set the context it simulates.
In the Checkout Builder base, over the buyer-checkout preview column.
Any preview surface that needs account / checkout / locale / amount params.

When not to use

As a page toolbar with publish actions — that's the Publish bar.
For a single control — drop the individual Select / AccountChip in directly.
When there is no preview to contextualize.

Usage

Read the whole context from onChange rather than wiring each control separately.
Let country cascade the currency; don't fight the auto-set.
Keep Country + Currency + Amount grouped tight — they read as one block.

Don't

Don't wrap the bar so it stacks — it scrolls horizontally by design.
Don't swap the Account chip / Checkout select for plain Selects — reuse the pickers.
Don't add publish actions here — that belongs in the Publish bar.

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

Checkout selectThe checkout picker on the left of the bar.
Account chipThe account picker on the left of the bar.
Top barShell chrome; the context bar sits over the preview, not the whole page.
Publish barThe editor's publish toolbar — a different bar for a different job.