Badge

Stable

A specialized status indicator crafted with cyberpunk neon auras, frosted glassmorphism, and live radar-ping status dots.

Installation

$pnpm add @siberui/react

Import

tsx

import { Badge } from '@siberui/react';

Primary Signal Tier

Primary badges represent system state and primary metadata with three intensity tiers (primary, primary-subtle, primary-outline).

Primary Solid

Primary Subtle

Primary Outline

tsx

<div className="flex flex-wrap gap-4 items-center">
  <Badge variant="primary">Primary Solid</Badge>
  <Badge variant="primary-subtle">Primary Subtle</Badge>
  <Badge variant="primary-outline">Primary Outline</Badge>
</div>

Semantic Intent Badges

Communicate security status, warnings, and alerts with semantically styled badges.

System Online

High Memory Load

Firewall Breach

Muted Cache

tsx

<div className="flex flex-wrap gap-4 items-center">
  <Badge variant="success" dot dotColor="green">System Online</Badge>
  <Badge variant="warning" dot dotColor="amber">High Memory Load</Badge>
  <Badge variant="danger" dot dotColor="rose">Firewall Breach</Badge>
  <Badge variant="secondary">Muted Cache</Badge>
</div>

Neon Cyberpunk Badges

The variant="neon" preset renders monospace uppercase badges illuminated by a cyan aura shadow.

QUANTUM_LOCKED

OVERDRIVE: ACTIVE

SECTOR_09

tsx

<div className="flex flex-wrap gap-6 items-center">
  <Badge variant="neon" dot dotColor="cyan">QUANTUM_LOCKED</Badge>
  <Badge variant="neon" glow>OVERDRIVE: ACTIVE</Badge>
  <Badge variant="neon" shape="square">SECTOR_09</Badge>
</div>

Frosted Glassmorphism Variant

The variant="glass" style creates frosted translucent capsules that float seamlessly across textured surfaces.

Zero-Trust Verified

Neural Stream

AES-256 GCM

tsx

<div className="p-8 rounded-2xl border border-white/10 bg-[#060913] bg-[url('/textures/circuit-board.svg')] bg-repeat flex flex-wrap gap-4 items-center justify-center">
  <Badge variant="glass">Zero-Trust Verified</Badge>
  <Badge variant="glass" dot dotColor="cyan">Neural Stream</Badge>
  <Badge variant="glass" shape="rounded">AES-256 GCM</Badge>
</div>

Pulsing Status Dots

Pass dot={true} to render a dual-layer live radar ping indicator.

Active Node

Streaming Logs

Sync Pending

Service Degraded

AI Co-pilot Active

tsx

<div className="flex flex-wrap gap-4 items-center">
  <Badge variant="outline" dot dotColor="green">Active Node</Badge>
  <Badge variant="outline" dot dotColor="cyan">Streaming Logs</Badge>
  <Badge variant="outline" dot dotColor="amber">Sync Pending</Badge>
  <Badge variant="outline" dot dotColor="rose">Service Degraded</Badge>
  <Badge variant="outline" dot dotColor="purple">AI Co-pilot Active</Badge>
</div>

Shapes & Scaling

Badges support pill (default), rounded, and square corner geometries across sm, md, and lg dimensions.

Small Pill (10px)

Medium Rounded (12px)

Large Square (14px)

tsx

<div className="flex flex-wrap items-center gap-4">
  <Badge size="sm" shape="pill">Small Pill (10px)</Badge>
  <Badge size="md" shape="rounded">Medium Rounded (12px)</Badge>
  <Badge size="lg" shape="square">Large Square (14px)</Badge>
</div>

HUD Telemetry Header Composition

An example of combining various badge tiers inside a real-time cluster telemetry banner.

KUBERNETES_CLUSTER_01

HEALTHY

REGION: EU-WEST

NODES: 12/12

UPTIME: 99.99%

tsx

<Card className="max-w-xl mx-auto border-cyan-500/30 bg-[#070b14] shadow-2xl">
  <CardContent className="p-6 space-y-4">
    <Row justify="between" align="center">
      <div className="flex items-center gap-2">
        <Activity className="h-4 w-4 text-cyan-400" />
        <span className="font-mono font-bold text-sm text-slate-100">KUBERNETES_CLUSTER_01</span>
      </div>
      <Badge variant="neon" dot dotColor="green">HEALTHY</Badge>
    </Row>
    <Row gap="sm" className="flex-wrap">
      <Badge variant="glass" size="sm">REGION: EU-WEST</Badge>
      <Badge variant="glass" size="sm">NODES: 12/12</Badge>
      <Badge variant="primary-subtle" size="sm">UPTIME: 99.99%</Badge>
    </Row>
  </CardContent>
</Card>

API Reference

PROPERTIES (7)← swipe to inspect →

Property	Description	Type	Default
variant	Visual theme preset.	"primary" \| "primary-subtle" \| "primary-outline" \| "secondary" \| "outline" \| "neon" \| "glass" \| "success" \| "warning" \| "danger"	"primary"
shape	Corner radius styling.	"pill" \| "rounded" \| "square"	"pill"
size	Typography and padding scale.	"sm" \| "md" \| "lg"	"md"
dot	Displays a live radar ping animated status dot.	boolean	false
dotColor	Color theme for the status dot.	"cyan" \| "purple" \| "green" \| "rose" \| "amber" \| "slate"	-
glow	Adds an exterior cyan neon atmospheric shadow.	boolean	false
pulse	Applies continuous opacity pulse animation across the entire badge.	boolean	false

Accessibility

Badges are rendered as semantic inline indicators. Ensure text content provides standalone meaning without relying solely on color.
When used as interactive filters or tags, pair with accessible keyboard focus indicators.

Best Practices

Telemetry Labels: Use variant="neon" for critical uppercase status alerts.
Frosted Surfaces: Use variant="glass" over rich backgrounds and circuit board textures.