data-display / beta

Amount

A formatted number with tabular numerals, a typographic minus, optional sign and sign-driven tone — money, counts, percents or custom units in the Kit locale.

LIVE PREVIEW

Loading preview…

When to use

Money and quantities in tables, stats, timelines and summaries.
Signed changes: pass signDisplay="exceptZero" and tone="sign".

Consider an alternative

Editing a number — use NumberField.
A rail property pill — use PropertyValue.
Status words — use Badge or InlineStatus.

Import

import { Amount } from '@revido-llc/kit';

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


value (required)	number \| null \| undefined	—	Major units by default. Null and undefined render fallback. Must be finite.
accessibleLabel	string	—	Spoken replacement for the visible amount, or for the fallback when the value is empty.
fallback	ReactNode	"—"	Visible fallback for null or undefined values. A non-empty string fallback is also what screen readers hear.
fallbackLabel	string	"Not available"	Spoken text for the default, an empty string or a non-string fallback. Pass a translation for non-English UIs.
format	AmountFormat	—	Intl formatting options. Decimal values default to two fraction digits.
locale	string	—	BCP 47 locale override; defaults to KitProvider locale.
minorUnits	boolean	false	Treat value as an integer in currency minor units (integer cents input); requires currency style.
signDisplay	"auto" \| "exceptZero" \| "always" \| "never"	"auto"	Controls whether plus and minus signs are shown.
tone	AmountTone	"default"	Text colour. "sign" follows the value's sign after rounding: success above zero, danger below, secondary for a value that rounds to zero. It does not follow `signDisplay`, so `signDisplay="never"` with `tone="sign"` shows the magnitude and lets colour carry the direction (pair it with `accessibleLabel` for screen readers).
unit	string	—	Quiet suffix for units Intl cannot name, such as "pts".
className	string	—

Examples

Signs and tones

<Amount value={-1.5} signDisplay="exceptZero" tone="sign" />

Money, percent and units

<Amount value={48250} minorUnits format={{ style: "currency", currency: "USD" }} />  // $482.50

In a stat and a table cell

<StatCard label="Balance" value={<Amount value={1234.5} format={{ style: "currency", currency: "USD" }} />} />
<DataTable aria-label="Payments" data={rows} columns={columns} columnAlign={{ value: "end" }} />

Missing value

<Amount value={null} />