Account Balance Card
Bank-account widget with a primary balance, optional visibility toggle, available/blocked breakdown, yield section, and an actions row. Locale-aware currency formatting via Intl.NumberFormat.
Checking
Conta corrente
Balance
R$ 12.480,55
Ag. 0001 · 12345-6
Last month yield
R$ 8,42
per month
Installation
npx ajaxui add account-balance-cardHide balance
The eye toggle masks every monetary value (main balance, breakdown, yield) at once while keeping the layout stable. Track it externally with hidden + onHiddenChange, or let the card own it with defaultHidden.
Checking
Click the eye to reveal
Balance
Available vs blocked
Pass available and blocked for a 2-column breakdown — useful for separating settled funds from holds (pending purchases, escrow, judicial blocks).
Checking
Conta corrente
Balance
R$ 12.480,55
Ag. 0001 · 12345-6
- Available
- R$ 11.980,55
- Blocked
- R$ 500,00
Accents
Four accent presets differentiate account types (checking vs. savings vs. payable) and surface the Pro plan with brand color.
Primary
Conta corrente
Balance
R$ 3.210,74
Pro Plan
Spending account
Balance
R$ 1.284,00
Savings
Poupança
Balance
R$ 48.001,00
Yield
R$ 312,45
per month
Invoices
Accounts payable
Balance
-R$ 1.840,20
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| accountName | string | — | Top label (e.g. "Checking"). |
| accountType | string | — | Secondary descriptor (e.g. "Conta corrente"). |
| accountNumber | string | — | Pre-formatted identifier (e.g. "Ag. 0001 · 12345-6"). |
| balance | number | — | Primary balance. Required. |
| currency | string | "BRL" | ISO 4217 currency code. |
| locale | string | "pt-BR" | Locale used for Intl currency formatting. |
| available | number | — | Settled funds. Renders the breakdown row. |
| blocked | number | — | Held/locked funds. |
| yield | { amount, ratePercent, period, label? } | — | Yield section below the breakdown. |
| hidden | boolean | — | Controlled visibility of all amounts. |
| defaultHidden | boolean | false | Uncontrolled initial visibility. |
| onHiddenChange | (h: boolean) => void | — | Called when the user toggles the eye. |
| hideable | boolean | true | Show the eye toggle in the header. |
| icon | ReactNode | — | Leading icon shown in a circle chip. |
| accent | "default" | "primary" | "success" | "subtle" | "default" | Visual variant. |
| actions | ReactNode | — | Action buttons row below the body. |
| loading | boolean | false | Skeleton in place of the balance. |
Accessibility
- The eye toggle is a real
<button>witharia-pressedand a contextual label ("Show balance" / "Hide balance"). - When the balance is hidden, the visual mask is
aria-hidden— the unmasked value is not exposed to screen readers in that state. - Currency amounts are formatted via
Intl.NumberFormatso SR users hear "twelve thousand four hundred eighty reais and fifty-five cents" instead of digit-by-digit.