Flow row Gagan

Payment flow visualization — from-avatar → arrow → to-avatar, with amount and action button. Used in the "balances" pane of the group screen to show simplified settlements after debt minimization. Each row represents a single recommended payment.

Default

you pay Rohan

2 expenses · net balance

₹680

you pay Priya

net of internet · rent split

₹180

Variants

You pay — coral amount

you

pay Kabir

₹320

Others pay — teal amount

Kabir → Priya

₹550

When the current user is the payer (left avatar), the amount is coral and the action is "settle" (solid ink). When the flow is between two other people, the amount is teal and the action is "remind" (ghost).

Usage

Do Use flow rows after running debt-minimization on a group's balances. Each row represents the minimum set of transactions needed to settle the group. Show 2–4 rows; if there are more, paginate or collapse into a "show all" link.

Don't Don't use flow rows to show raw per-expense balances — those belong in the expense list with list-item. Flow rows show simplified, consolidated settlements only.

Do Keep note text concise. "2 expenses · net balance" is enough context. The user can tap to see the detail. If the source of the balance is a single distinctive item, name it ("net of Goa trip").

Don't Don't show a "settle" button for flows where the current user isn't involved (neither payer nor receiver). Show "remind" or no action at all — the current user can't settle on behalf of others.

Spec

Property	Value	Notes
Row gap	12px	Between all cells
Padding	12px 0	Top/bottom; no horizontal padding
Endpoint avatar	28px	Circle, display font 600 12px
Arrow width	20px	1px line + › glyph at right end
Text size	14px	Body font (Onest)
Note size	10px mono	Uppercase, 0.08em tracking
Amount font	JetBrains Mono 600	Tabular numerals
Pill padding	6px 14px	Border-radius 999px
Pill press	scale(0.97)	140ms ease-out
Row divider	1px dashed `--ink-line`	Last row has no border

Props

Prop	Type	Required	Description
`from`	{ name, color }	required	Payer — left avatar
`to`	{ name, color }	required	Receiver — right avatar
`amount`	number	required	Settlement amount in rupees
`currentUserIs`	`'from' \| 'to' \| 'neither'`	required	Controls pill type and amount color
`note`	string	optional	Short meta note below the name

Accessibility

Screen readers The visual arrow (→) communicates direction. For screen readers, add an aria-label on the flow row: aria-label="You pay Rohan ₹680 — settle". The endpoint avatars should be aria-hidden="true" since the text already names both parties.

Button context "Settle" in isolation is ambiguous with multiple rows. Use aria-label="Settle ₹680 with Rohan" on the pill button.

Code

HTML

<ul role="list" class="flow-list">
  <li class="flow-row"
      aria-label="You pay Rohan ₹680">
    <div class="flow-endpoints" aria-hidden="true">
      <span class="flow-ep" style="background:#FADED4;color:#E76F51">A</span>
      <div class="flow-arrow"></div>
      <span class="flow-ep" style="background:#D6EAE2;color:#0A5F4F">R</span>
    </div>
    <div class="flow-summary">
      <div class="flow-line">
        you pay <strong>Rohan</strong>
      </div>
      <span class="flow-note">2 expenses · net balance</span>
    </div>
    <span class="flow-amt coral" aria-hidden="true">₹680</span>
    <button class="flow-pill solid"
            aria-label="Settle ₹680 with Rohan">settle</button>
  </li>
</ul>

Design tokens used

Token	Value	Role
`--ink-line`	#DDD2B8	Arrow line + row divider
`--ink-mute`	#8A8276	Arrow glyph + note text
`--coral`	#E76F51	Amount — you pay
`--teal`	#0E7C66	Amount — others' flow
`--ink`	#171513	Settle pill background
`--s-warm`	#F1E9D5	Remind pill background
`--d-fast`	140ms	Pill press transition

See it in context

Interactive prototype — this component is live below. Tap, swipe, and drag to explore.

Flow rows appear in the balances pane. Swipe the segmented toggle to "balances" to see simplified payment flow rows showing who pays whom.