Amount | Lime design system

Examples

In a list

Before you send

Estimates

When to use it

Use: Next to a button or send control that moves money, so the sum is known before the press.
Use: A list of options with different prices, such as a transfer speed picker.
Use: A bill share or a fee beside the choice it belongs to.
Not for: How much the person has left. Use Balance.
Not for: A static fact about a plan, such as $4 a month. Use Badge.
Not for: The state of a payment, such as Paid. Use Status.
Not for: The amount at the end of a transaction row; write formatAmount text so the column stays quiet. Use List.

8 rules

Must: Pass available and let the pill pick its tone; do not set tone="danger" by hand. Because a hand-set tone never turns amber when tight and skips the spoken "more than you have available".
Must: Show the sum before the press, on or beside the control that moves money. Because a sum that appears only after the press is a receipt, and the money has already moved.
Must: Disable the action or turn it into Add money when the payment exceeds available; keep the red pill. Because a payment the account cannot cover fails only after the press, and the red pill alone offers no way on.
Must: Pass major units (dollars), not cents. Because 1250 cents renders as $1,250.00, a hundred times the real sum.
Never: Build the sum as a template string; use Amount. Because a hand-built string drops the minus, the separators or the tabular figures.
Never: Signal a tone by color alone; keep the amount and its sign. Because a red tint says nothing to a screen reader, while Amount speaks the signed sum and the shortfall.
Should: Show one pill per control that moves money; two pills make the person add them up.
Should: Put the pill in a row that can wrap; it is shrink-0 and nowrap.

4 checks

: The spoken amount is real sr-only text, such as "minus 50.00 US dollars"; the visible text is aria-hidden.
: An insufficient payment adds ", more than you have available" to the spoken text.
: Not focusable; data-affordability is a styling hook, not an ARIA state.
: Tone never carries the warning alone; the amount and sign stay.

8 edge cases

Very large sum: $1,234,567.89 stays on one line; it never wraps or truncates.
Sub-dollar and compact: 0.5 reads $0.50; compact rounds to $1.
Zero or NaN: 0 reads $0.00 with no sign; a value that is not a number reads Unavailable, a numeric string reads as its number, and a NaN available stays neutral.
Narrow to 120px: The pill stays on one line and overflows; put it in a row that wraps.
Right to left: The sum is isolated left to right, so the minus stays before the digits.
Zoom 200%: The pill keeps its fixed height and the text clips rather than wraps.
Funds still loading: Omit available; the pill tones when it arrives, with no layout shift.
Forced colors: Tint fills drop; tone reads from the sign and the spoken label only.

10 props

12 tokens