Components · Data
Tag
A compact label that pairs an intent colour with a distinct cue shape per threat kind (diamond for hostile, rectangle for friendly, square for neutral, quatrefoil for unknown), so meaning survives in Mono mode.
Live in all three modes
Day · Night-NVG · Mono: one component, re-themed through the token layer.
Variants & states
- intent (default/primary/success/warning/danger)
- threat (hostile/friendly/neutral/unknown)
- size (sm/md)
- dismissible
Tokens used
--semantic-color-surface-raised--semantic-color-threat-hostile--semantic-color-status-critical--semantic-color-action-primary
Copy-paste
import { Tag } from 'operator-components';
<Tag threat="hostile">Track 0341</Tag>
<Tag intent="warning" onDismiss={() => clear()}>Link degraded</Tag>Figma: library link coming soon. Gated until it's on sole-owned footing. (TODO: replace with the Community/library URL once published.)