Emergency Banner
Full-screen or inline alert banner with mirrored hazard bands, massive condensed title type, and scanline treatment. Seven severity levels cover every operational scenario — from routine information to total system failure.
1import { EmergencyBanner } from "@mdrbx/nerv-ui";
Basic Usage
EMERGENCY
PATTERN BLUE DETECTED — ALL PERSONNEL TO BATTLE STATIONS
Severity Variants
Seven severity levels control the color scheme, hazard stripe style, and flickering behavior.
//Emergency (Red — flickering)
EMERGENCY
//Warning (Orange — flickering)
WARNING
Static Bands
Disable stripe motion when you want a frozen broadcast frame or a cleaner capture.
ALERT
SIGNAL HELD — MANUAL REVIEW
//Info (Cyan — static)
SYSTEM UPDATE
//Success (Green — static)
MISSION COMPLETE
ALL TARGETS ELIMINATED — STAND DOWN
//Critical (Red inverted — white text, flickering)
CRITICAL
CORE MELTDOWN IMMINENT — EVACUATE
//Contrast (Black & white — high visibility)
BROADCAST
SYSTEM-WIDE ANNOUNCEMENT
//Disabled (Gray — muted)
OFFLINE
SYSTEM DEACTIVATED — NO ACTIVE ALERTS
With Children
The children prop allows embedding links, buttons, or other interactive content inside the banner.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "EMERGENCY" | Main alert text displayed in large type |
| subtext | string | — | Secondary message below the main text |
| visible | boolean | true | Controls visibility with AnimatePresence enter/exit animation |
| severity | "emergency" | "warning" | "info" | "success" | "critical" | "contrast" | "disabled" | "emergency" | Visual severity level controlling colors, stripes, and flickering |
| fullScreen | boolean | false | Fixed full-screen overlay mode vs inline container |
| animateStripes | boolean | true | Animates the mirrored hazard bands; disable for a static broadcast frame |
| children | ReactNode | — | Optional content rendered below subtext (links, buttons, etc.) |
| className | string | "" | Additional CSS classes |
Accessibility
EmergencyBanner uses role="alert" and aria-live="assertive" to announce
the alert to screen readers immediately when it becomes visible.
The emergency and warning variants intentionally push toward the anime broadcast look: dominant black type on a hot field, mirrored diagonal bands collapsing toward center, and much less decorative chrome than a normal HUD panel.