System Dialog
Modal dialog with a monitor-overlay backdrop. Severity levels add red borders, blinking warning icons, and hazard stripes. Uses AnimatePresence for smooth enter/exit transitions.
[SRC]tsx
1import { SystemDialog } from "@mdrbx/nerv-ui";
Severity Levels
[i]INTERACTIVE
Click each button to open the dialog. Click ACCEPT, DECLINE, or the overlay background to close.
//Normal
NORMALinspection frame
live inspectionframe-01
//Warning
WARNINGinspection frame
live inspectionframe-01
//Critical
CRITICALinspection frame
live inspectionframe-01
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open* | boolean | — | Dialog visibility state |
| title | string | "SYSTEM NOTIFICATION" | Dialog title text |
| children | ReactNode | — | Dialog body content |
| severity | "normal" | "warning" | "critical" | "normal" | Visual severity level |
| acceptText | string | "ACCEPT" | Accept button label |
| declineText | string | "DECLINE" | Decline button label |
| onAccept | () => void | — | Accept button callback |
| onDecline | () => void | — | Decline button callback |
| onClose | () => void | — | Overlay click callback |
| showHazardStripes | boolean | — | Force hazard stripe border display |
| className | string | "" | Additional CSS classes |