MatchPair

stable

Side-by-side reconciliation match pair showing bank vs. book entries with differences highlighted

Finance/Storybook ↗

import { MatchPair } from "@nodus/design-system/finance"

Match Comparison

Bank

Date

2026-03-08

Description

Wire Transfer — Atlas Co.

Reference

WT-20260308-001

Amount

$125,000.00

Book

Date

2026-03-07

Description

Wire to Atlas Co.

Reference

AP-INV-4521

Amount

$124,500.00

Differences: amount, date

Loading demo…

Props

Prop	Type	Default	Description
`bankEntry`req	`ReconciliationEntry`	—	Bank-side entry
`bookEntry`req	`ReconciliationEntry`	—	Book-side entry
`differences`req	`string[]`	—	Field names with differences
`currency`	`string`	—	Currency code
`locale`	`string`	—	BCP 47 locale override
`label`	`string`	—	Pair label

bankEntryrequired

Type ReconciliationEntryDefault —

Bank-side entry

bookEntryrequired

Type ReconciliationEntryDefault —

Book-side entry

differencesrequired

Type string[]Default —

Field names with differences

currency

Type stringDefault —

Currency code

locale

Type stringDefault —

BCP 47 locale override

label

Type stringDefault —

Pair label

Metadatasemantic type outcome

MobileStacks / Scroll

Two-column match layout stacks to single column on mobile.

Design Rationale

This component was designed to express:

View all principles →

Explore Related

ReconSummary→

Reconciliation summary dashboard with match rate, item counts, and status breakdown

ExceptionQueue→

Reconciliation exception queue with severity, age, and resolution status

Was this helpful?