Balance | Lime design system

Examples

In the header

Hi, Maya

Running low

Hi, Maya

When to use it

Use: The header of an account screen, where the balance is always in sight.
Use: A sheet or settings page that shows the balance and leads to adding money.
Use: The balance is both a read-out and a way to add more.
Not for: One payment or fee. Use Amount.
Not for: A plan name or a count that is not a balance. Use Badge.
Not for: A static number with no action. Use plain text.

7 rules

Must: Give Balance an onClick (or render) that opens the add money flow; its label ends with Add money. Because its spoken label ends in Add money, so without onClick it promises an action that never runs.
Should: Set low under a limit your product chooses, before the person is stopped, not at zero.
Must: Pass value in major units (dollars); the chip adds the symbol, separators and cents. Because a string such as "$1,240" formats as $NaN, and cents read a hundred times too high.
Never: Restyle the chip with gradients or fills; it is lime with the subtle glow, amber when low. Because the switch to amber is the low warning, and a hand-set fill hides it.
Should: Show one Balance per screen; two can differ for a moment and look like a bug.
Must: Render a skeleton or nothing while the balance loads; never a stale or NaN number. Because an undefined value prints $NaN in the header, and a stale one invites a payment the account cannot cover.
Should: Use render to make it a link; do not nest a button in a link.

4 checks

: The button label is the spoken amount, then "running low" when low, then the action.
: The visible text is aria-hidden; the label covers it.
: Enter and Space run onClick; focus shows a 2px olive ring.
: Low also adds the word left, so color is not the only signal.

7 edge cases

Very large balance: Renders in full on one line; the pill grows.
Zero: Reads $0.00.
Container narrower than the pill: It overflows; it does not wrap or shrink.
Right to left: The wallet sits at the start and the number follows.
Zoom 200%: The pill keeps h-8 and text can clip; put it in a header that grows.
Forced colors: The glow drops and the chip takes a 1px ButtonText border.
Missing balance: A value that is not a number reads Unavailable; a numeric string such as "12.40" is read as the number. While loading, show a Skeleton.

5 props

21 tokens