Settle row Gagan

Compact row showing a settlement action — avatar, who owes whom, amount, and an action pill button. Used in the "settle strip" section of the home hero card to surface the most urgent outstanding balances at a glance.

Variants

you owe Flat 2BHK

via rent · 3 expenses

₹860

Kabir owes you

via dinner · 2 days ago

₹860

States

You owe — coral

you owe Priya

₹420

Owed to you — teal

Rohan owes you

₹420

The pill button intent mirrors the row direction. When you owe, the action is settle (ink solid — primary, you're the actor). When you're owed, the action is remind (warm ghost — secondary, you're prompting someone else).

Inconsistency note

Hardcoded avatar colors Avatar background and foreground colors are hardcoded in Gagan's designs as { bg: '#D6EAE2', fg: '#0A5F4F' } for owed and { bg: '#FADED4', fg: '#E76F51' } for owe, rather than using the avatar palette tokens. These values happen to be --teal-pale/--teal-deep and --coral-pale/--coral, but the indirection is missing. Recommendation: replace hardcoded values with --teal-pale, --teal-deep, --coral-pale, and --coral tokens so dark mode overrides work correctly.

Usage

Do Limit the settle strip to 2–3 rows maximum. These should be the highest-urgency settlements (oldest or largest). Showing more than 3 defeats the purpose — the home card is a summary, not a full list.

Don't Don't use settle row inside the main expense list — that's the list-item component. Settle row is specifically for the compact settle strip where every pixel counts and the name + amount + action must fit in one tight line.

Do Use meta text (group name, age, number of expenses) to give context. "you owe Flat 2BHK" alone is useful; "you owe Flat 2BHK · via rent · 3 expenses" gives the user enough to decide whether to settle now or later.

Don't Don't make the amount color ambiguous. Coral = you owe (outflow). Teal = you're owed (inflow). Never swap these. The color is the first signal the eye reads before the text.

Spec

Property	Value	Notes
Row height	~52px	10px top + bottom padding, 32px avatar
Avatar size	32px	Circle, initials only (1 char for groups, 1–2 for people)
Gap between elements	10px	Consistent across all cells
Text size	14px	Body font (Onest)
Meta size	10px	JetBrains Mono, uppercase, 0.08em tracking
Amount size	14px	JetBrains Mono 600
Pill padding	6px 14px	Border-radius 999px
Pill press state	scale(0.97)	`:active`, 140ms ease-out
Row divider	1px dashed `--ink-line`	Last row has no border

Props

Prop	Type	Required	Description
`who`	string	required	Person or group name
`side`	`'owe' \| 'owed'`	required	Determines color and pill label
`amount`	number	required	Settlement amount in rupees
`glyph`	string	optional	Single char initial override for avatar
`age`	string	optional	Meta text: group, age, expense count

Accessibility

Button labels The pill buttons "settle" and "remind" must have accessible context — a bare "settle" button is ambiguous when multiple rows are present. Add aria-label: aria-label="Settle ₹860 with Flat 2BHK". For remind: aria-label="Remind Kabir about ₹860".

Row semantics Use role="listitem" on each row with a wrapping role="list". This gives screen readers the count ("list of 2 items") before diving into each row.

Code

HTML

<ul role="list" class="settle-strip">
  <!-- you owe -->
  <li class="settle-row" role="listitem">
    <span class="settle-row-avatar owe" aria-hidden="true">F</span>
    <div class="settle-row-body">
      <div class="settle-row-text">
        you owe <strong>Flat 2BHK</strong>
      </div>
      <div class="settle-row-meta">via rent · 3 expenses</div>
    </div>
    <span class="settle-row-amt coral" aria-hidden="true">₹860</span>
    <button class="settle-row-pill solid"
            aria-label="Settle ₹860 with Flat 2BHK">settle</button>
  </li>
  <!-- owed to you -->
  <li class="settle-row" role="listitem">
    <span class="settle-row-avatar owed" aria-hidden="true">K</span>
    <div class="settle-row-body">
      <div class="settle-row-text">
        <strong>Kabir</strong> owes you
      </div>
      <div class="settle-row-meta">via dinner · 2 days ago</div>
    </div>
    <span class="settle-row-amt teal" aria-hidden="true">₹860</span>
    <button class="settle-row-pill ghost"
            aria-label="Remind Kabir about ₹860">remind</button>
  </li>
</ul>

Design tokens used

Token	Value	Role
`--teal-pale`	#D6EAE2	Owed avatar background
`--teal-deep`	#0A5F4F	Owed avatar foreground
`--teal`	#0E7C66	Owed amount color
`--coral-pale`	#FADED4	Owe avatar background
`--coral`	#E76F51	Owe avatar foreground + amount color
`--ink`	#171513	Settle pill background
`--s-warm`	#F1E9D5	Remind pill background
`--ink-line`	#DDD2B8	Row divider

See it in context

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

Settle rows appear below the hero card dashed divider. Switch state via the tweaks panel to see how rows change between default (mixed debts), net owe (you owe more), and settled (all clear).