Money

Borders · src/components/Money/Money.tsx

An amount of money, in the reader's own convention.

Everything here is Intl, and that is the point: crore grouping for en-IN, no decimals on the won, and US$ rather than a bare $ for a dollar shown to a Korean reader. A hand-rolled formatter gets one of those wrong, and the one it gets wrong is somebody's currency.

The currency mark is its own span so it can be set apart from the digits typographically without anyone parsing the formatted string back apart.

When Intl cannot format the pair at all it falls back to "amount currency" rather than rendering nothing: an unformatted number is readable, a missing one is a bug nobody sees.

Import

import { Money } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
amount required	number
currency required	string	ISO 4217, e.g. KRW, INR, USD.
locale	string	Defaults to the page's lang, which is the reader's convention, not the money's.
compact	boolean	The locale's own short form: 2.8Cr, 28M, 2,840만.
display	'symbol' | 'narrowSymbol' | 'code' | 'name'	How to draw the currency. Leave it alone unless you know why.
decimals	boolean	false drops .00 from a whole amount, for a headline figure. Does not round.
title	string	Native tooltip, for an exact figure behind a compact one.
className	string