RiskGauge

stable

Risk metric display with confidence interval and severity bar

import { RiskGauge } from "@nodus/design-system/finance"

VaR (95%, 1-day)medium

$2.50M

[$2.10M — $2.90M]

Credit Exposurehigh

$45.00M

Loading demo…

Props

Prop	Type	Default	Description
`label`req	`string`	—	Risk metric label (e.g. 'VaR (95%, 1-day)')
`value`req	`number`	—	Point estimate value
`lower`	`number`	—	Confidence interval lower bound
`upper`	`number`	—	Confidence interval upper bound
`level`req	`'low' \| 'medium' \| 'high' \| 'critical'`	—	Risk level classification
`currency`	`string`	USD	ISO 4217 currency code

labelrequired

Type stringDefault —

Risk metric label (e.g. 'VaR (95%, 1-day)')

valuerequired

Type numberDefault —

Point estimate value

lower

Type numberDefault —

Confidence interval lower bound

upper

Type numberDefault —

Confidence interval upper bound

levelrequired

Type 'low' | 'medium' | 'high' | 'critical'Default —

Risk level classification

currency

Type stringDefault USD

ISO 4217 currency code

Metadatalowmediumhighcriticalsemantic type border surface outcome

MobileStacks / Scroll

Gauge fills container. Supporting metric row stacks below gauge on mobile.

Design Rationale

This component was designed to express:

Aggregated position card showing balance, period change, and severity

Inline proportional bar for ratio visualization in table cells

Was this helpful?