Skip to content

Amount

Money set as typography: a locale-grouped figure in the heading face with a small raised currency sign.

betaReact AriaSource

Wallet · 2026

₹18,000

Installation

pnpm add @syntara/react @syntara/tokens
import { Amount } from '@syntara/react';

Usage

import { Amount } from '@syntara/react';

export function WalletBalance() {
  return <Amount value={18000} currency="INR" locale="en-IN" size="xl" />;
}

Examples

Sizes

sm, md, lg and xl map to font sizes 2xl, 3xl, 4xl and 5xl.

£1,240£1,240£1,240£1,240

Locales

Lakh grouping, smaller minor units, a sign after the figure, and an Arabic locale.

Lakh grouping
₹1,84,250
Pence set smaller
£1,249.50
Sign after the figure
1.249,50 €
Arabic locale
‏18,000 د.إ.‏

Compact

Short notation for summaries: ₹18K, ₹1.8L, £240k.

₹18.0K₹1.8L£240.0K

Symbol and tone

Raised against inline signs, signed amounts and tones.

₹7,400₹7,400+₹1,250−₹980₹18,000

Accessibility

No keyboard interaction of its own.

  • The typeset figure is aria-hidden; a visually hidden copy of the full formatted string ("₹18,000") is what screen readers read, once, in order.
  • Negative amounts use a true minus sign (−) and are also announced as such; pair a signed tone with the sign, never colour alone.
  • The figure keeps its own locale's direction inside RTL pages, so ₹18,000 never reorders.
  • Tones use text roles contrast-checked at 4.5:1 on canvas, default and raised surfaces.

Guidelines

Do

  • Use lg or xl for the one figure a screen is about; sm or md in lists and cards.
  • Pass the locale the money belongs to (en-IN for rupees) when it differs from the page locale.
  • Put an Eyebrow above a hero figure to say what it is.

Don’t

  • Don't pre-format the number yourself; pass the raw value so grouping stays locale-correct.
  • Don't put several xl amounts side by side: one hero per view.
  • Don't use tone alone to say whether money came in or went out; show the sign too.

API reference

Amount

valueRequired
number

The amount in major units (18000 = ₹18,000).

currencyRequired
string

ISO 4217 code, e.g. "INR", "GBP", "AED".

locale
string

Formatting locale. Defaults to the locale from ThemeScope or I18nProvider (useLocale).

Default React Aria locale

size
  • sm
  • mddefault
  • lg
  • xl

sm = font-size 2xl, md = 3xl, lg = 4xl, xl = 5xl, each with its own tracking. sm is medium weight; md and up are regular.

symbol
  • raiseddefault
  • inline

raised: the currency sign at ~45% size in text.subtle, aligned to the top of the digits (60% for multi-character signs such as US$ or د.إ.), and minor units set smaller. inline: plain text, sign in text.subtle.

tone
  • neutraldefault
  • brand
  • accent
  • info
  • success
  • warning
  • danger

Colour of the figure: text.default, text.brand, accent.text or the feedback fg role. The sign and fraction stay text.subtle.

compact
boolean

Compact notation with at most one decimal (₹18K, ₹1.8L, £240k).

Default false

formatOptions
Omit<Intl.NumberFormatOptions, 'style' | 'currency'>

Extra Intl options, e.g. { signDisplay: 'always' } or { currencyDisplay: 'narrowSymbol' }. Whole numbers show no decimals unless you set fraction digits.

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour5
text.defaulttext.subtletext.brandaccent.textfeedback.*.fg
Type5
font-headingfont-size.2xl–5xlfont-tracking.2xl–5xlfont-weight.regularfont-weight.medium