import { FXRateCard } from "@danagraph/design-system/finance"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
basereq | string | — | Base currency (e.g. EUR) |
quotereq | string | — | Quote currency (e.g. USD) |
bidreq | number | — | Bid price |
askreq | number | — | Ask price |
midRate | number | — | Mid-market rate (default: calculated from bid/ask) |
change | number | — | Daily change as decimal (e.g. 0.0035 for +0.35%) |
sparkData | number[] | — | Sparkline data points for trend |
precision | number | 4 | Rate precision |
breakpoints | ThresholdBreakpoints | — | Custom severity breakpoints for change |
density | "default" | "compact" | — | Display density |
loading | boolean | — | Show loading skeleton |
error | string | — | Error message |
onRetry | () => void | — | Retry handler for error state |
baserequiredType
stringDefault —Base currency (e.g. EUR)
quoterequiredType
stringDefault —Quote currency (e.g. USD)
bidrequiredType
numberDefault —Bid price
askrequiredType
numberDefault —Ask price
midRateType
numberDefault —Mid-market rate (default: calculated from bid/ask)
changeType
numberDefault —Daily change as decimal (e.g. 0.0035 for +0.35%)
sparkDataType
number[]Default —Sparkline data points for trend
precisionType
numberDefault 4Rate precision
breakpointsType
ThresholdBreakpointsDefault —Custom severity breakpoints for change
densityType
"default" | "compact"Default —Display density
loadingType
booleanDefault —Show loading skeleton
errorType
stringDefault —Error message
onRetryType
() => voidDefault —Retry handler for error state
MobileStacks / Scroll
Rate card goes full-width. Rate and delta stack vertically on mobile.
Design Rationale
This component was designed to express:
Explore Related
CurrencyPair→
Currency pair display with mid-rate for FX trading and treasury
SparkLine→
Inline SVG micro-chart for trend visualization in table cells
SpreadIndicator→
Bid-ask spread display with basis point calculation and severity coloring
DeltaCell→
Change/delta display with severity-based coloring for P&L and returns
Was this helpful?