Components · Feedback
Alert / AlertStack
A badged alert (and stackable AlertStack) with a priority level (P1 to P3) shown as a glyph and code, so severity reads without relying on colour. Detail wraps without clipping.
Live in all three modes
Day · Night-NVG · Mono: one component, re-themed through the token layer.
Link lost
Primary datalink dropped, failover engaged.
Signal degraded
CH 12 SNR below threshold.
Track update
14 tracks held on COP.
Link lost
Primary datalink dropped, failover engaged.
Signal degraded
CH 12 SNR below threshold.
Track update
14 tracks held on COP.
Link lost
Primary datalink dropped, failover engaged.
Signal degraded
CH 12 SNR below threshold.
Track update
14 tracks held on COP.
Variants & states
- severity: critical / caution / info
- stacked (AlertStack)
- dismissible
Tokens used
--semantic-color-status-critical--semantic-color-status-caution--semantic-color-surface-card--semantic-color-text-primary
Copy-paste
import { AlertStack } from 'operator-components';
<AlertStack items={[
{ id: '1', severity: 'critical', title: 'Link lost', detail: 'Failover engaged.' },
]} />Figma: library link coming soon. Gated until it's on sole-owned footing. (TODO: replace with the Community/library URL once published.)