Kill Switch

Stable

Military-grade two-stage interlock toggle switch featuring a 3D translucent safety flip-cover guard, illuminated mechanical lever, and industrial hazard chevron borders.

Installation

$pnpm add @siberui/react

Import

tsx
import { KillSwitch } from '@siberui/react';

Basic Usage & Two-Stage Safety Interlock

Requires two intentional steps to activate: 1) Lift the protective flip-cover guard, 2) Flip the heavy toggle lever.

PRIMARY POWER OVERRIDE
SYS-ILOCK
[ARM]● ● ●[SAFE]
LOCKED UNDER GUARD
INTERLOCK_ENGAGED
SECURE // SAFE
tsx
<KillSwitch
  label="PRIMARY POWER OVERRIDE"
  hazard="amber"
  onArmChange={(armed) => console.log('Kill switch state:', armed)}
/>

Industrial Hazard Chevron Themes (Amber, Rose, Cyan)

Assign visual hazard warning stripes via hazard: amber (Warning), rose (Critical Emergency), cyan (Power Grid), or neutral.

WARNING // CAUTION
SYS-ILOCK
[ARM]● ● ●[SAFE]
LOCKED UNDER GUARD
INTERLOCK_ENGAGED
SECURE // SAFE
CRITICAL EMERGENCY
SYS-ILOCK
[ARM]● ● ●[SAFE]
LOCKED UNDER GUARD
INTERLOCK_ENGAGED
SECURE // SAFE
GRID OVERCLOCK
SYS-ILOCK
[ARM]● ● ●[SAFE]
LOCKED UNDER GUARD
INTERLOCK_ENGAGED
SECURE // SAFE
tsx
<div className="grid grid-cols-1 sm:grid-cols-3 gap-6 w-full">
  <KillSwitch hazard="amber" label="WARNING // CAUTION" />
  <KillSwitch hazard="rose" label="CRITICAL EMERGENCY" />
  <KillSwitch hazard="cyan" label="GRID OVERCLOCK" />
</div>

Scale Dimensions (sm, md, lg)

Select an appropriate scale via size: "sm" | "md" | "lg".

SM SWITCH
SYS-ILOCK
[ARM]● ● ●[SAFE]
LOCKED UNDER GUARD
INTERLOCK_ENGAGED
SECURE // SAFE
MD SWITCH
SYS-ILOCK
[ARM]● ● ●[SAFE]
LOCKED UNDER GUARD
INTERLOCK_ENGAGED
SECURE // SAFE
LG EMERGENCY
SYS-ILOCK
[ARM]● ● ●[SAFE]
LOCKED UNDER GUARD
INTERLOCK_ENGAGED
SECURE // SAFE
tsx
<div className="flex flex-wrap items-center justify-center gap-8 w-full">
  <KillSwitch size="sm" hazard="cyan" label="SM SWITCH" />
  <KillSwitch size="md" hazard="amber" label="MD SWITCH" />
  <KillSwitch size="lg" hazard="rose" label="LG EMERGENCY" />
</div>

Mission-Critical Reactor Overdrive Console

Composite mission terminal with controlled safety switch interlocks.

REACTOR_01 // SAFETY_INTERLOCK

CORE VENT DISCHARGE

SAFETY_LOCKED

Lift protective guard and flip switch to initiate emergency venting.

CORE PURGE OVERRIDE
SYS-ILOCK
[ARM]● ● ●[SAFE]
LOCKED UNDER GUARD
INTERLOCK_ENGAGED
SECURE // SAFE
ESC KEY TO DISARM
tsx
<ChamferCard
  signal={isReactorArmed ? 'rose' : isCoverOpen ? 'amber' : 'cyan'}
  glow
  tag="REACTOR_01 // SAFETY_INTERLOCK"
  statusDot={isReactorArmed ? 'rose' : 'green'}
  className="max-w-md mx-auto w-full"
>
  <ChamferCardHeader>
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-2">
        <AlertTriangle className={isReactorArmed ? 'h-4 w-4 text-rose-400 animate-pulse' : 'h-4 w-4 text-cyan-400'} />
        <ChamferCardTitle>CORE VENT DISCHARGE</ChamferCardTitle>
      </div>
      <Badge variant={isReactorArmed ? 'destructive' : 'glass'} dot dotColor={isReactorArmed ? 'rose' : 'cyan'}>
        {isReactorArmed ? 'ARMED // LIVE' : 'SAFETY_LOCKED'}
      </Badge>
    </div>
    <ChamferCardDescription>
      {isReactorArmed
        ? 'WARNING: Superheated plasma ejection in progress.'
        : 'Lift protective guard and flip switch to initiate emergency venting.'}
    </ChamferCardDescription>
  </ChamferCardHeader>

  <ChamferCardContent className="flex flex-col items-center justify-center py-6">
    <KillSwitch
      size="lg"
      hazard="rose"
      label="CORE PURGE OVERRIDE"
      isArmed={isReactorArmed}
      isCoverOpen={isCoverOpen}
      onCoverOpenChange={setIsCoverOpen}
      onArmChange={setIsReactorArmed}
    />
  </ChamferCardContent>

  <ChamferCardFooter className="flex items-center justify-between">
    <span className="text-xs font-mono text-slate-400">
      {isReactorArmed ? <CypherText text="REACTOR_PURGE_SEQUENCE_RUNNING" trigger="mount" /> : 'ESC KEY TO DISARM'}
    </span>
    {isReactorArmed && (
      <Button
        variant="danger"
        size="sm"
        onClick={() => {
          setIsReactorArmed(false);
          setIsCoverOpen(false);
        }}
      >
        EMERGENCY ABORT
      </Button>
    )}
  </ChamferCardFooter>
</ChamferCard>

API Reference

PROPERTIES (8)← swipe to inspect →
PropertyDescriptionTypeDefault
isArmed
Controlled armed toggle switch state.
boolean
false
isCoverOpen
Controlled protective flip-cover guard position.
boolean
false
hazard
Hazard chevron stripe accent color.
"amber" | "rose" | "cyan" | "neutral"
"amber"
size
Scale dimension tier.
"sm" | "md" | "lg"
"md"
label
Text label displayed beneath the switch casing.
string
"KILL SWITCH"
disabled
Disables all user interaction.
boolean
false
onArmChange
Callback fired when armed state transitions.
(armed: boolean) => void
-
onCoverOpenChange
Callback fired when cover opens or closes.
(open: boolean) => void
-

Accessibility & Fail-Safe Mechanics

  • Emergency Escape Key Fail-Safe: Pressing Escape immediately snaps the cover shut and disarms the switch.
  • ARIA Switch Role: Implements role="switch" and aria-checked.