Alert
Priority alert + AlertStack (auto-sorts by severity, correct aria-live). Color is paired with a P-level code and glyph.
Example
Section titled “Example”P1
Signal lost on net
Channel 3 dropped at 14:22Z. Attempting reacquisition on alternate frequency.
P2
Degraded performance
Sensor coverage reduced.
P3
Status update
Sync complete.
| Prop | Type | Default | Description |
|---|---|---|---|
severity | 'info' | 'caution' | 'critical' | required | Maps to P3/P2/P1, a glyph, and aria-live (assertive for critical). |
title | string | required | Headline. |
detail | string | — | Supporting line; wraps, never clips. |
onDismiss | () => void | — | When provided, shows the dismiss control. |
States
Section titled “States”- info / P3
- caution / P2
- critical / P1
- dismissible
Do / Don’t
Section titled “Do / Don’t”Do
Use
Use
AlertStack so the most critical alert sorts to the top.Don’t
Don’t use
Don’t use
critical for routine info — it announces assertively.Modes & RTL
Section titled “Modes & RTL”Colors come only from Semantic tokens, so this component re-themes automatically across Day / Night-NVG / Mono with no variant swap. It uses CSS logical properties, so it mirrors correctly in RTL.