Status

Stable

Unified semantic state system mapping statuses to color rings, radar halos, animated pulse rings, and monospace metadata rows.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  Status, 
  StatusDot, 
  StatusBadge, 
  StatusIndicator, 
  SystemState 
} from '@siberui/react';

StatusDot & Pulse Rings

The fundamental atom of the status system. Live states (online, loading, critical) pulse automatically.

online

idle

warning

critical

offline

unknown

tsx

<div className="flex flex-wrap gap-8 items-center justify-center">
  <StatusDot state="online" size="lg" />
  <StatusDot state="loading" size="lg" />
  <StatusDot state="idle" size="lg" />
  <StatusDot state="warning" size="lg" />
  <StatusDot state="critical" size="lg" />
  <StatusDot state="offline" size="lg" />
  <StatusDot state="unknown" size="lg" />
</div>

StatusBadge Pills

Compact rounded status pills combining the indicator dot and capitalized status text.

Online

Idle

Warning

Critical

Offline

Unknown

tsx

<div className="flex flex-wrap gap-3 justify-center">
  <StatusBadge state="online" />
  <StatusBadge state="loading" />
  <StatusBadge state="idle" />
  <StatusBadge state="warning" />
  <StatusBadge state="critical" />
  <StatusBadge state="offline" />
</div>

StatusIndicator & Live Loaders

Designed for navigation headers and toolbars. Automatically renders a spinning loader when state is loading.

SAT_ORBIT_ONLINE

RECALIBRATING...

DEGRADED_PERF

FIREWALL_BREACH

tsx

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 w-full">
  <StatusIndicator state="online" label="SAT_ORBIT_ONLINE" />
  <StatusIndicator state="loading" label="RECALIBRATING..." />
  <StatusIndicator state="warning" label="DEGRADED_PERF" />
  <StatusIndicator state="critical" label="FIREWALL_BREACH" />
</div>

Status Composite with Descriptions

Composite item combining indicator dot, primary label, and multi-line descriptive text.

Mainframe Core (Frankfurt)

All 128 virtual clusters executing normally. 0 packet drops.

Orbital Uplink Relay (Tokyo)

Heartbeat timeout exceeded by 240 seconds. Automatic failover engaged.

tsx

<div className="space-y-4 max-w-md w-full">
  <Status
    state="online"
    label="Mainframe Core (Frankfurt)"
    description="All 128 virtual clusters executing normally. 0 packet drops."
  />
  <Status
    state="critical"
    label="Orbital Uplink Relay (Tokyo)"
    description="Heartbeat timeout exceeded by 240 seconds. Automatic failover engaged."
  />
</div>

SystemState Key-Value Rows

Monospace telemetry metadata table rows with integrated status dots.

Cluster Uptime142d 08h 12m

Active Gateway Regioneu-central-1 (Frankfurt)

Round-Trip Latency14.2 ms

Lattice Memory Pressure89.4%

Air-Gapped HSMDISCONNECTED

tsx

<div className="w-full max-w-md rounded-xl border border-white/[0.08] bg-[#070b14] p-4">
  <SystemState label="Cluster Uptime" value="142d 08h 12m" state="online" />
  <SystemState label="Active Gateway Region" value="eu-central-1 (Frankfurt)" />
  <SystemState label="Round-Trip Latency" value="14.2 ms" state="online" />
  <SystemState label="Lattice Memory Pressure" value="89.4%" state="warning" />
  <SystemState label="Air-Gapped HSM" value="DISCONNECTED" state="offline" />
</div>

Frosted Cyber-Glass Cluster Node Monitor

Composite health monitor card with circuit substrate textures and border sweeps.

CLUSTER SENTINEL NODE

NOMINAL

BGP Autonomous SystemAS64512

Consensus ProtocolRaft v2.4

Replication Lag0.04 ms

tsx

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <div className="relative z-10 space-y-5">
    <div className="flex items-center justify-between pb-3 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <Server className="h-4 w-4 text-cyan-400" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">CLUSTER SENTINEL NODE</span>
      </div>
      <StatusBadge state="online" label="NOMINAL" />
    </div>

    <div className="space-y-3">
      <SystemState label="BGP Autonomous System" value="AS64512" />
      <SystemState label="Consensus Protocol" value="Raft v2.4" state="online" />
      <SystemState label="Replication Lag" value="0.04 ms" state="online" />
    </div>

    <div className="pt-2">
      <Button variant="neon" glow className="w-full">
        PERFORM HEALTH CHECK
      </Button>
    </div>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Server Quorum Health Card

Operational mission card displaying real-time quorum node telemetry.

QUORUM REPLICATION MATRIX

3/3 NODES

Realtime consensus state across orbital validator nodes.

NODE_ALPHA (Virginia Hub)

Sync offset: 0 frames • 100% quorum vote

NODE_BETA (Frankfurt Hub)

Sync offset: 1 frame • 100% quorum vote

NODE_GAMMA (Tokyo Hub)

Sync offset: 14 frames • Latency warning

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">QUORUM REPLICATION MATRIX</CardTitle>
      <StatusBadge state="online" label="3/3 NODES" />
    </div>
    <CardDescription className="text-xs text-slate-400">
      Realtime consensus state across orbital validator nodes.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-3">
    <Status state="online" label="NODE_ALPHA (Virginia Hub)" description="Sync offset: 0 frames • 100% quorum vote" />
    <Status state="online" label="NODE_BETA (Frankfurt Hub)" description="Sync offset: 1 frame • 100% quorum vote" />
    <Status state="warning" label="NODE_GAMMA (Tokyo Hub)" description="Sync offset: 14 frames • Latency warning" />
  </CardContent>
</Card>

API Reference

PROPERTIES (5)← swipe to inspect →

Property	Description	Type	Default
state	Semantic state key driving colors, dot hues, and text colors.	"online" \| "offline" \| "idle" \| "loading" \| "warning" \| "critical" \| "unknown"	"unknown"
pulse	Forces or disables the animated radial pulsing radar glow ring. Defaults to true for online, loading, and critical states.	boolean	-
label	Custom textual label override.	React.ReactNode	-
description	For Status: Subtitle text displayed below the label.	React.ReactNode	-
value	For SystemState: Right-aligned metadata value.	React.ReactNode	-

Accessibility

ARIA Role Status: StatusDot provides an automatic aria-label communicating current status to assistive screen readers.

Best Practices

Consistency: Never hardcode arbitrary colors for status indicators; always consume the standardized StatusState enum tokens.