Skip to content
skrewww

Industries · Banking

Banking Account Card

React bank account summary card for banking dashboards: show one account's balance, balance-history sparkline, account type, and action to view transactions.

One account summary — inherits Card's Shape/Surface modes

betaReact AvailableFigma UnavailableDocs Partial
React last updated
2026-07-25
Documentation last updated
2026-10-06
Accessibility target
WCAG 2.2 AA (target)
Version
0.1.0-beta

Known open questions

  • No Figma reference exists for this component or for Industry Systems generally — confirmed absent via full file search on 2026-07-25, not an oversight.
  • Line Chart gained an additive `sparkline` prop for this component's balance-history treatment — a genuine Layer 2 extension (suppresses point-marker dots, uses a thinner stroke), not a Banking-specific style override (see components/ui/LineChart.tsx).
  • Glass Surface + Pill Shape inheritance was verified live (not assumed) — this component sets no background-color or border-radius of its own anywhere in its stylesheet; every surface property comes from Card's own custom properties.

Purpose

Use Banking Account Card as an account overview in a React banking dashboard: identify one checking or savings account, show its current balance and recent balance history, then offer an action such as viewing transactions. It presents data supplied by your application; it does not fetch balances or calculate them from transactions.

Anatomy

Composes: Card (surface shell, title + footer slots) + Tag (account type) + Button (action trigger, in Card's footer slot) + Line Chart in sparkline mode (balance history).

When to use

Account-list views with one card per account, or a dashboard summary that leads to an account's activity. Supply a pre-formatted balance and an ordered series of numeric balance-history values for that same account and currency.

When not to use

Individual payments, transfers, and deposits belong in a Banking Transaction Row list. Spending or income totals with selectable time ranges belong in Banking Balance Summary. Use Card directly for a general content surface without account data.

Accessibility

Name the account in accountName and include the account, time period, and currency in balanceHistoryLabel. Line Chart exposes the sparkline as role="img" with a visually hidden data table. The footer action is a native button; use a specific actionLabel to distinguish repeated cards. The card itself is not a clickable control.

Common mistakes

Passing currency-formatted strings as history values, mixing accounts or currencies in one series, or leaving onAction as a no-op. Format the displayed balance in the application and keep history values numeric; the card does not reconcile the two. Preserve Card's surface and shape tokens instead of hardcoding a background or radius.

Properties

accountName, accountType, balance, balanceHistory (LineChartDatum[]), balanceHistoryLabel, actionLabel, onAction.

Account Card vs Transaction Row vs Balance Summary

Account Card answers which account this is and what its current balance and recent trend look like. Transaction Row describes one movement of money, with status and a detail popover. Balance Summary compares spending or income over selectable time ranges. Use them together for account overview, activity, and period analysis; Account Card does not provide a transaction list or a time-range selector.

Supplying account data and connecting the action

Format balance for the user's locale before passing it in. Pass balanceHistory as ordered { label, value } entries in the same currency, and state that currency in balanceHistoryLabel because the card does not expose chart value-formatting props. Bind onAction to your application's account navigation or detail view; the component has no built-in destination. In Next.js, the example belongs in a client component tree because it accepts an event handler.

Tokens used

semantic/text/primarysemantic/text/secondary

Component API

PropTypeDefaultDescription
accountNamestring—Shown as the Card's title heading.
accountTypestring—e.g. "Checking", "Savings", "Credit" — shown as a Tag.
balancestring—Pre-formatted balance string (e.g. "$4,231.09") — currency formatting is the consumer's responsibility.
balanceHistoryLineChartDatum[]—Recent balance history for the sparkline — same shape as Line Chart's own data prop.
balanceHistoryLabelstring—Accessible name for the sparkline chart.
actionLabelstring—Label for the footer action button.
onAction() => void—Called when the action button is activated.

React example

Copy React example
"use client";

import { BankingAccountCard } from "@/components/ui/BankingAccountCard";

export function AccountOverview({ onViewTransactions }: { onViewTransactions: () => void }) {
  return (
    <BankingAccountCard
      accountName="Everyday Checking"
      accountType="Checking"
      balance="$4,231.09"
      balanceHistory={[
        { label: "Week 1", value: 4100 },
        { label: "Week 2", value: 4180 },
        { label: "Week 3", value: 4050 },
        { label: "Week 4", value: 4231 },
      ]}
      balanceHistoryLabel="30-day balance history for Everyday Checking in USD"
      actionLabel="View Everyday Checking transactions"
      onAction={onViewTransactions}
    />
  );
}

Related components

Related tokens

Related concepts