Receipt match | Lime design system

Examples

Matched

Corner Market

Oct 2, Receipt matched

Expenses this week

Corner Market

Oct 2, Receipt matched

Harbor Cafe

Oct 3, Receipt says $16.50

Paper Lane

Oct 4, No receipt yet

When to use it

6 rules

Must: Give a review match a note that says what differs. Because the default review note is "Check the receipt", which never says what to check.
Must: Pass onAdd with a missing match; the empty paper is the add button. Because without onAdd the paper is still a focusable button that does nothing.
Must: Pass the amount signed, negative for money out. Because Amount prints a positive value with no minus, so a payment reads as money in.
Should: Pass the receipt photo as src when you have it; the drawn paper is a stand-in.
Should: Stack matches with a 12px gap and no hairlines; the papers already set the rhythm.
Never: Wrap a match in a Card or a grey panel; it is a row. Because the paper thumbnail is already the frame, so a card puts a box around a box.

3 checks

3 edge cases

Long merchant name: Truncates with an ellipsis; the amount keeps its width.
Narrow screen: The note truncates; the paper stays 40 by 48.
Right to left: The paper sits at the start and its mark moves to the other corner.

7 props

9 tokens