List item

List items are the primary row unit in Settld — they appear in expense lists, group member views, contact pickers, and activity feeds. Every list item has a press state. Three variants cover the full range of information density.

Variants

Simple is label only, with an optional trailing chevron for navigation. Use in settings lists, group pickers, and any list where secondary info isn't needed.

Detailed adds a leading icon and a description line below the label. Use for expense rows where category context and metadata (who added, when) are relevant.

Expense is the full variant — avatar, name, description, amount, and status badge. Use in the "balances" and "people" views where you need to show the financial relationship at a glance.

Density

Density	Padding	Avatar	Label size	Use case
Default	12px 16px	36×36px	15px	Standard list views, expense history
Comfortable	16px	40×40px	16px	Contact picker, member list — more breathing room

States

State	Visual change	Transition
Default	Transparent background	—
Hover	Background shifts to `--s-warm`	140ms ease-out
Pressed	`scale(0.97)`	140ms ease-out
Selected	`--teal-pale` background, label shifts to `--teal`	140ms ease-out
Disabled	40% opacity, pointer-events off	—

On dark surfaces

On dark surfaces, text shifts to --dark-text and muted text to --dark-text-mute. Hover background is rgba(251,248,240,0.06). Selected uses a semi-transparent teal to avoid harsh contrast. Status badges are unchanged — they carry enough color to read on both surfaces.

Anatomy

Avatar

Aarav

Goa Airbnb · 12 May

Body (label + desc)

₹2,400 Settled

End (amount + badge)

Part	Element	Notes
Container	`<button>` or `<a>`	Use `<button>` for actions, `<a>` for navigation. Full-width, transparent background.
Leading slot	`.list-item-avatar` or `.list-item-icon`	Avatar: 36px circle with initial letter. Icon: 36px rounded rect for category symbols.
Body	`.list-item-body`	Flex-grows to fill space. Label truncates with ellipsis. Description is optional.
End	`.list-item-end`	Right-aligned column. Can hold amount, badge, or trailing chevron.

Usage

Do Use amount colors deliberately: .owed (coral) means "you owe them", .due (teal) means "they owe you". Keep the distinction consistent throughout the app.

Don't Don't show raw email addresses or phone numbers as description text. Use "owes you", "you owe", or a venue name — not technical identifiers.

Do Separate list items with the dashed divider. Use inset dividers when avatars are present. The dashed line preserves the khata visual language without adding visual weight.

Don't Don't use more than one badge per row. Don't put a badge and a trailing chevron on the same row — pick one.

Accessibility

Semantics Use <button> when tapping triggers an action (expand, select, open sheet). Use <a> when tapping navigates. Never use <div> — it has no keyboard or screen reader support.

Amount colors Coral and teal amounts convey meaning through color. Always include text that conveys the same meaning: "owes you ₹520" is complete; just "₹520" in red is not. Use aria-label on the amount span if the surrounding label doesn't make the direction clear.

Code

HTML

<!-- Simple -->
<button class="list-item">
  <div class="list-item-body">
    <div class="list-item-label">Goa trip</div>
  </div>
  <span aria-hidden="true">›</span>
</button>

<!-- Expense variant -->
<button class="list-item">
  <div class="list-item-avatar" style="background:var(--teal)">K</div>
  <div class="list-item-body">
    <div class="list-item-label">Kabir</div>
    <div class="list-item-desc">owes you</div>
  </div>
  <div class="list-item-end">
    <span class="list-item-amount due" aria-label="owes you ₹1,200">₹1,200</span>
    <span class="list-item-badge settled">Settled</span>
  </div>
</button>

CSS classes

Class	Purpose
`.list-item`	Base — flex row, press state, hover, border-radius
`.list-item-avatar`	36px circle with initial letter
`.list-item-icon`	36px rounded rect for category symbols
`.list-item-body`	Flex-grow, min-width 0 for text truncation
`.list-item-label`	Primary label — 15px/500, truncates
`.list-item-desc`	Secondary description — 13px/muted, truncates
`.list-item-end`	Right-aligned column for amount and badge
`.list-item-amount`	Mono amount — 15px/600
`.list-item-amount.owed`	Coral — you owe them
`.list-item-amount.due`	Teal — they owe you
`.list-item-badge`	Base pill badge
`.list-item-badge.settled`	Green pill
`.list-item-badge.pending`	Amber pill
`.list-item-badge.overdue`	Coral pill
`.list-item.selected`	Teal-pale background, teal label

Design tokens used

Token	Value	Role
`--teal-pale`	#D6EAE2	Selected background
`--teal`	#0E7C66	Selected label, "due" amount
`--coral`	#E76F51	"Owed" amount, overdue badge
`--s-warm`	#F1E9D5	Hover background
`--ink-mute`	#8A8276	Description text
`--r-sm`	10px	Item border-radius
`--d-fast`	140ms	Hover / press transition