PriceBreakdown

Labelled line items with optional subLabel, originalAmount strike-through, and a totals row. For booking summaries, checkout sheets, trip receipts.

You can either pass an items array for the simple case or compose with <PriceBreakdown.Line> children when you need custom rows interleaved with the data ones.

Default#

Trip price$89 × 3 nights

$267

Trip discount

−$25

Insurance

$18

Service fee

$32

Taxes

$24.30

Total$316.30USD

Loading…

originalAmount renders a strike-through in the sale semantic token. Setting discount on the amount paints it in saleText.

Nightly rate × 3SAVE25 promo applied

$567$425

Service fee

$48

Total$473USD

Loading…

Line item (`PriceBreakdownItem`)#

Each entry in items (or the props on <PriceBreakdown.Line>).

label: ReactNode (required) — primary label on the left.
subLabel?: ReactNode — small muted secondary line under the label (e.g. "$89 × 3 nights" under "Trip price").
amount: ReactNode (required) — right-aligned amount column. Pre-formatted ("$267", "−$25").
originalAmount?: ReactNode — strike-through original price shown next to the amount in the sale color. Use for promos that reveal "was X, now Y".
discount?: boolean — when true, the amount renders in the saleText color (the design system's discount color). Use for the discount line itself (typically a negative amount).

Composition#

tsx

<PriceBreakdown total="$316" currency="USD">
  <PriceBreakdown.Line label="Trip price" subLabel="$89 × 3 nights" amount="$267" />
  <PriceBreakdown.Line label="Trip discount" amount="−$25" discount />
  <PriceBreakdown.Line label="Service fee" amount="$32" />
</PriceBreakdown>

Props#

PriceBreakdown#

Props for PriceBreakdown
Prop	Type	Default	Description
items	`readonly PriceBreakdownItem[] \| undefined`	`—`	Line items rendered in order.
total	`ReactNode`	`—`	Final total. Pre-formatted (e.g. `$267`).
totalLabel	`ReactNode`	`—`	Label for the total row. Default `'Total'`.
currency	`ReactNode`	`—`	Currency hint shown next to the total.
children	`ReactNode`	`—`	Optional bespoke children — use instead of `items` for custom rows.

PriceBreakdown.Line#

Props for PriceBreakdownLine
Prop	Type	Default	Description
className	`string \| undefined`	`—`
label *	`ReactNode`	`—`
subLabel	`ReactNode`	`—`	Optional secondary text (e.g. `$89 × 3 nights`).
amount *	`ReactNode`	`—`
originalAmount	`ReactNode`	`—`	When set, renders the amount with a strike-through in the `sale` token.
discount	`boolean \| undefined`	`—`	When true, renders the amount in the `sale` color (e.g. discounts).

Edit this page on GitHub →