finance
AmountText
Example
+$4,250.00−$94.32
Import
import { AmountText } from '@connor-adams/designsystem'Usage
The money-value primitive — use it for every currency figure instead of hand-coloring spans, so the green-in / oxblood-out convention stays consistent.
<AmountText value={4900} /> {/* +$4,900.00 in green */}
<AmountText value={-84.2} /> {/* −$84.20 in oxblood */}
<AmountText value={128400} size="xl" currency="USD" locale="en-US" />
<AmountText value={2400} colored={false} showSign={false} />
Props: currency, locale, direction (override inferred sign), colored, showSign, decimals, size="sm|default|lg|xl", weight.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | |
| currency | string | undefined | CAD | |
| locale | string | undefined | en-CA | |
| direction | "in" | "out" | "zero" | undefined | — | |
| colored | boolean | undefined | true | |
| showSign | boolean | undefined | true | |
| decimals | number | undefined | 2 | |
| size | number | "sm" | "lg" | "xl" | "default" | undefined | default | |
| weight | "regular" | "medium" | "semibold" | "bold" | undefined | bold |