Money Amount
@velon-finance/ui · status: stable · molecule · domain
Exibição de valores com reconhecimento de moeda. Usa Intl.NumberFormat para separadores corretos por locale, vem com fonte monospace e figuras tabulares para que os dígitos alinhem entre as linhas, e suporta um toggle de ocultar saldo no estilo Revolut.
Visão geral
$12,847.23R$ 4.321,50€ 0,50
Com toggle de ocultar
$12,847.23••••
Com sinal (cor de receita/despesa)
$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 | Tipo | Padrao | Descrição |
|---|---|---|---|
amount | number | . | O valor numérico (já na unidade alvo, não em centavos) |
currency | 'USD' | 'BRL' | 'EUR' | string | . | Código ISO 4217 |
locale | string | browser default | Locale para o formato dos separadores |
hideable | boolean | false | Mostra o toggle de olho para mascarar o valor |
defaultHidden | boolean | false | Estado inicial oculto (somente quando hideable) |
decimals | number | 2 | Casas decimais |
signed | boolean | false | Aplica o tom success/destructive para valores ± |
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Tamanho visual |