Data display

Amount

Money with its direction: +$8,400.00 in green for money in, −$842.17 for money out, formatted for the reader's language and currency.

import { Amount } from '@alea/ui';

Examples

In and out

Positive is money in (green, with a plus), negative money out. icon adds the arrow.

In a table

End-aligned with tabular numbers, so the digits line up.

Tokens

The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.

Color

--alea-status-success…
--alea-surface-raised…
--alea-text-muted…

Space

--alea-space-2…

Props

`Amount` props

Money with its direction: +$8,400.00 in green for money in, −$842.17 for money out, in the people's locale.

Prop	Type	Default	Description
`value`required	`number`	-	The amount: positive is money in, negative money out.
`className`	`string`	-	Extra class names for the root element.
`colorIn`	`boolean`	`true`	Color money in green. Default true.
`currency`	`string`	`'USD'`	ISO currency code. Default USD.
`formatOptions`	`NumberFormatOptions`	-	Number format options (merged with the currency).
`icon`	`boolean`	-	Show the in/out arrow before it. Default false.

Specs

Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.

Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-amount.alea-amount-icon.alea-amount-value
Data attributes: data-colordata-dir=in

The sign is part of the text, so the direction never depends on color.
The arrow is decorative.

Do and don't

Align amounts to the end in tables.
Pass the ISO currency of the account.

Don't

Don't color money out red: most rows are payments, and red means a problem.

In Figma

Amount with Direction (in, out) and Icon.