finance
AccountCard
Example
Balance$4,820.50
SyncedBalance owing−$1,480.25
SyncedImport
import { AccountCard } from '@connor-adams/designsystem'Usage
A tile for a connected account in lists and the accounts grid.
<AccountCard name="Amex Cobalt" institution="Amex" mask="3001" kind="credit" balance={-1284.5} status="synced" />
<AccountCard name="TD Chequing" institution="TD" mask="8842" kind="chequing" balance={6240.18} status="synced" onClick={open} selected />
kind tints the chip and relabels credit as "owing". status="synced|syncing|error". Pass onClick for a selectable button.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name* | ReactNode | — | |
| institution | string | undefined | — | |
| mask | string | undefined | — | |
| balance | number | undefined | 0 | |
| currency | string | undefined | CAD | |
| locale | string | undefined | en-CA | |
| kind | "default" | "chequing" | "savings" | "credit" | "investment" | "cash" | undefined | default | |
| status | "error" | "synced" | "syncing" | undefined | — | |
| selected | boolean | undefined | false | |
| onClick | (() => void) | undefined | — |