ThresholdAlert

stable

Time-critical alert banner for cutoff warnings and breach notifications

FinanceInteractive/Storybook ↗

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

Cash positioning cutoff in 45 minutes

Daily cash positioning must be completed by 11:00 AM ET.

Liquidity breach detected

LCR dropped below 100% threshold at 09:42 AM.

Loading demo…

Props

Prop	Type	Default	Description
`title`req	`string`	—	Alert headline
`urgency`req	`'info' \| 'warning' \| 'critical'`	—	Urgency level — controls color and weight
`children`	`ReactNode`	—	Optional detail text or timestamp
`action`	`string`	—	Action button label (e.g. 'Review positions')
`onAction`	`() => void`	—	Action click handler

titlerequired

Type stringDefault —

Alert headline

urgencyrequired

Type 'info' | 'warning' | 'critical'Default —

Urgency level — controls color and weight

children

Type ReactNodeDefault —

Optional detail text or timestamp

action

Type stringDefault —

Action button label (e.g. 'Review positions')

onAction

Type () => voidDefault —

Action click handler

MobileTouch Target

Alert CTA buttons must be ≥44px. Full-width on mobile.

Design Rationale

This component was designed to express:

Compliance/regulatory status indicator for filings, KYC, and attestations

Was this helpful?