Condition Branch Card
Branch decision panel with an If row of field, operator, and value chips, Then and Else path summaries, and an add condition affordance.
Branch decision panel with an If row of field, operator, and value chips, Then and Else path summaries, and an add condition affordance.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Condition Branch Card is the decision node extracted as a standalone panel. An If row shows three pill tokens: Deal value, is greater than, and $10,000, each rendered as a muted bordered chip. Below it an Add condition inline button allows more rules. A divider separates the condition from two path rows: a Then row (Continue: Send contract via DocuSign, badged 2 more steps) and an Else row (Continue: Send Slack message to rep, badged 1 more step). Cancel and Apply condition sit bottom-right.
The condition and both paths are const objects; the PathRow component takes a variant prop (then vs else) to differentiate the leading badge color without conditional class strings in the parent.
Reach for this block as the condition node inside an automation builder or workflow canvas, wired to a field picker so the chip tokens become real select inputs.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the single-condition branch split. Other branch configurations:
Tip: showing Then and Else paths as named rows with their next step avoids the blank else ambiguity where users assume nothing happens on the false branch.