Patterns

Routing condition card

The condition node on the Routing flow canvas (Figma Card_workflow). It REFLECTS the condition configuration of a route branch — the conditions are configured elsewhere — and lets the merchant edit them from the node. The node is a muted frame with a white content group inset to the left (rounded-left corners); the muted strip on the right is the connector zone, and a round connector handle sticks out the right edge. Two shapes: collapsed (the catch-all node, a centered title + id) and expanded (an ID / Name / Description block over one or more conditions).

Updated Aug 4, 2026 by Juan Pablo Turina

Live preview

All other paymentsID: 79099
ID840611J90
NameTarjetas
DescriptionTodas las tarjetas de credito visa
Title condition
One of
ArgentinaChileColombiaEcuador
import {
  RoutingConditionCard,
  RoutingConditionInfo,
  RoutingCondition,
} from "@/components/patterns/routing-condition-card";

<RoutingConditionCard onMute={mute} onMenu={openMenu} className="w-[376px]">
  <RoutingConditionInfo
    id="840611J90"
    name="Tarjetas"
    description="Todas las tarjetas de credito visa"
    onCopyId={copyId}
  />
  <RoutingCondition
    title="Card country"
    operator="One of"
    values={["Argentina", "Chile", "Colombia", "Ecuador"]}
  />
</RoutingConditionCard>

Anatomy

A muted node frame (rounded-xl, shadow-xs) wrapping a white content group with left-rounded corners; the muted strip on the right is the connector zone. Collapsed, the white group centers a title + id (left-padded so it sits balanced against the actions). Expanded, an ID / Name / Description block sits over one or more condition blocks. The node actions (overflow menu + mute) live in their own column, and the connector handle sticks out the right edge.

ID840611J90
NameTarjetas
DescriptionTodas las tarjetas de credito visa
Title condition
One of
ArgentinaChileColombiaEcuador
  1. 1
    Connector handle

    The round action handle (RoutingConnector) sticking out the right edge — the anchor an edge is drawn from and the Add step affordance. Three states: active / disabled / block (documented on RoutingProviderCard).

  2. 2
    Node actions

    Mute bell (and, expanded, the overflow menu) in an icon column. Each uses the kit's icon-button hover — the same box the table row kebab reveals.

  3. 3
    Heading (collapsed)

    The catch-all node: a centered title + id with a copy affordance, left-padded to balance against the actions.

  4. 4
    Info block

    ID / Name / Description rows — values right-aligned; long values (Description) truncate.

  5. 5
    Condition

    A reflected condition: an icon in a tinted square, a bold title, an operator chip (secondary) and the value chips (outline).

States

Collapsed (catch-all)

The 'All other payments' node — a centered title + id. The default branch with no configured conditions.

All other paymentsID: 79099
Expanded (with conditions)

A named condition — an ID / Name / Description block over its conditions. Each condition reflects its operator + values; edit from the overflow menu.

ID840611J90
NameTarjetas
DescriptionTodas las tarjetas de credito visa
Title condition
One of
ArgentinaChileColombiaEcuador

Import

Copy this import line at the top of the file where you compose this molecule.

Compose from the parts: a RoutingConditionCard shell holding a RoutingConditionCardHeading (collapsed) OR a RoutingConditionInfo + one or more RoutingCondition blocks (expanded).

import { RoutingConditionCard, RoutingConditionCardHeading, RoutingConditionInfo, RoutingCondition } from "@/components/patterns/routing-condition-card";

Props

The shell owns the connector handle + the node actions; the heading, info block and each condition carry their own props.

RoutingConditionCard

PropTypeDefaultDescription
onMute() => void—Mute bell in the node-actions column.
onMenu() => void—Overflow menu (kebab) in the node-actions column.
connector"active" | "disabled" | "block" | "none""active"The forward connector handle state (see RoutingProviderCard for the full 3-state doc). "none" hides it.
onConnect() => void—Click handler for the connector handle ("Add step").
childrenReactNode—A Heading (collapsed) or an Info block + Condition blocks (expanded).
classNamestring—Set the node width here (e.g. w-[376px]); collapsed hugs by default.

RoutingConditionCardHeading

PropTypeDefaultDescription
titlestring—The catch-all title (text-lg semibold), centered.
idstring—The node id, shown as 'ID: {id}'.
onCopyId() => void—Renders a copy affordance after the id.

RoutingConditionInfo

PropTypeDefaultDescription
idstring—ID row value (with an optional copy affordance).
namestring—Name row value.
descriptionstring—Description row value (truncates when long).
onCopyId() => void—Copy affordance on the ID row.

RoutingCondition

PropTypeDefaultDescription
titlestring—The condition title (text-base bold).
operatorstring—The operator chip, e.g. 'One of', 'Equal' (secondary Badge).
valuesstring[]—The value chips (outline Badges, wrap).
iconPhosphorIconTreeStructureShown in a bg-blue-600/15 tinted square.

When to use

  • To represent a route branch's condition set on the Routing canvas.
  • To reflect the configured conditions (operator + values) and let the merchant edit them.
  • As the catch-all 'All other payments' entry, or a named condition.

When not to use

  • To CONFIGURE the conditions from scratch — that is a separate condition editor; this card reflects + edits the result.
  • For a provider step — that is the routing provider card.
  • Outside the Routing canvas.

Usage

Do
  • Keep the catch-all title on one line; left-pad the heading so it stays balanced against the actions column.
  • Right-align the info values and truncate long ones (Description).
  • Show each condition's operator chip (secondary) above its value chips (outline).
Don't
  • Don't let the node actions overlap the content — give them their own column in the node.
  • Don't hardcode the condition-icon tint — use an alpha (bg-blue-600/15) so it adapts to dark.
  • Don't give the connector handle a kebab-style hover — it is the action handle with its own three states, not a menu icon.

Related

Cross-links to the atoms this molecule composes and sibling patterns.