BreachAlert

stable

Risk breach alert panel with three severity levels, acknowledgement flow, and limit/current display

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

⬛CRITICALVARGlobal Equity Desk

14:00

VaR limit breached

1-day 99% VaR $5.8M exceeds $5M limit — 116% utilization

CURRENT 5.8MLIMIT 5.0M+16.0% OVER

△WARNINGCONCMeridian Capital

13:30

Concentration risk approaching

Single-name exposure 82% of $50M limit

CURRENT 41.0MLIMIT 50.0M+-18.0% OVER

▲BREACHCPTYEastern Corp

12:45

Counterparty limit exceeded

Net exposure $52.1M exceeds $50M bilateral limit

CURRENT 52.1MLIMIT 50.0M+4.2% OVER

Loading demo…

Props

Prop	Type	Default	Description
`alerts`req	`BreachAlertItem[]`	—	Alerts to display
`maxVisible`	`number`	—	Maximum alerts before collapse
`density`	`"default" \| "compact"`	—	Display density

alertsrequired

Type BreachAlertItem[]Default —

Alerts to display

maxVisible

Type numberDefault —

Maximum alerts before collapse

density

Type "default" | "compact"Default —

Display density

MobileTouch Target

Alert dismiss and action buttons must be ≥44px. Full-width on mobile.

Design Rationale

This component was designed to express:

Chronological risk limit breach timeline with severity escalation and acknowledgement tracking

Composite risk score card with rating tier, period delta, and dimension breakdown bars

Time-critical alert banner for cutoff warnings and breach notifications

Was this helpful?