Money Amount
@velon-finance/ui · status: stable · molecule · domain
Currency-aware amount display. Uses Intl.NumberFormat for locale-correct separators, ships in monospace+tabular figures so digits align across rows, and supports a Revolut-style hide-balance toggle.
Overview
$12,847.23R$ 4.321,50€ 0,50
With hide toggle
$12,847.23••••
Signed (income/expense colouring)
$1,500.00-$237.45
Code
import { MoneyAmount } from '@velon-finance/ui'
<MoneyAmount amount={12847.23} currency="USD" hideable />
<MoneyAmount amount={4321.5} currency="BRL" locale="pt-BR" />
<MoneyAmount amount={-237.45} currency="USD" signed />Props
| Prop | Type | Default | Description |
|---|---|---|---|
amount | number | . | The numeric amount (already in the target unit, not centavos) |
currency | 'USD' | 'BRL' | 'EUR' | string | . | ISO 4217 code |
locale | string | browser default | Locale for separator format |
hideable | boolean | false | Show the eye toggle to mask the amount |
defaultHidden | boolean | false | Initial hidden state (only when hideable) |
decimals | number | 2 | Decimal places |
signed | boolean | false | Apply success/destructive tone for ±values |
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Visual size |