Components · Feedback

Alert / AlertStack

A badged alert (and stackable AlertStack) with a priority level (P1–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.

P2

Signal degraded

CH 12 SNR below threshold.

P3

Track update

14 tracks held on COP.

Day
P2

Signal degraded

CH 12 SNR below threshold.

P3

Track update

14 tracks held on COP.

Night-NVG
P2

Signal degraded

CH 12 SNR below threshold.

P3

Track update

14 tracks held on COP.

Mono

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.)