Alert

Stable

High-priority status callouts featuring glowing gradient top accent wires, integrated semantic iconography, and dismiss actions.

Installation

$pnpm add @siberui/react

Import

tsx

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

Basic Usage & Accent Bars

Alerts render with an illuminated top hairline accent gradient and automated icon placement.

AUTONOMOUS DEFENSE ACTIVE

All perimeter sentinels are operating within nominal telemetry thresholds. Subnet 10.240.0.0/16 secured.

tsx

<div className="max-w-xl w-full">
  <Alert
    variant="neon"
    title="AUTONOMOUS DEFENSE ACTIVE"
    icon={<Terminal className="h-4.5 w-4.5 text-cyan-400" />}
  >
    All perimeter sentinels are operating within nominal telemetry thresholds. Subnet 10.240.0.0/16 secured.
  </Alert>
</div>

Semantic Intent Signals (Neon, Info, Success, Warning, Rose)

Communicate status urgency through semantic variants: neon, success, warning, destructive, or frosted glass.

NEURAL SYNC (CYAN)

Primary quantum handshake established with orbital station.

SECURITY VERIFIED (EMERALD)

Cryptographic signature verified against root certificate authority.

CORE OVERCLOCK (AMBER)

Thermal junction temperature reaching 82°C. Dynamic throttling enabled.

CRITICAL BREACH (ROSE)

Unauthorized packet injection detected on ingress interface eth0.

tsx

<div className="flex flex-col gap-4 max-w-xl w-full">
  <Alert variant="neon" title="NEURAL SYNC (CYAN)">
    Primary quantum handshake established with orbital station.
  </Alert>

  <Alert variant="success" title="SECURITY VERIFIED (EMERALD)">
    Cryptographic signature verified against root certificate authority.
  </Alert>

  <Alert variant="warning" title="CORE OVERCLOCK (AMBER)">
    Thermal junction temperature reaching 82°C. Dynamic throttling enabled.
  </Alert>

  <Alert variant="destructive" title="CRITICAL BREACH (ROSE)">
    Unauthorized packet injection detected on ingress interface eth0.
  </Alert>
</div>

Dismissible Banners (closable)

Set closable and bind onClose to render interactive dismiss buttons.

SYSTEM MAINTENANCE SCHEDULED

Orbital gateway firmware upgrade scheduled at 04:00 UTC. Zero downtime expected.

tsx

<div className="max-w-xl w-full">
  {!dismissed ? (
    <Alert
      variant="neon"
      closable
      onClose={() => setDismissed(true)}
      title="SYSTEM MAINTENANCE SCHEDULED"
    >
      Orbital gateway firmware upgrade scheduled at 04:00 UTC. Zero downtime expected.
    </Alert>
  ) : (
    <Button variant="secondary" size="sm" onClick={() => setDismissed(false)}>
      Restore Alert Banner
    </Button>
  )}
</div>

Frosted Cyber-Glass Anomaly Callout

Nest frosted glass alerts over circuit substrate boards with active perimeter beam sweeps.

LIVE TELEMETRY MONITOR

MONITORING

DYNAMIC ROUTE OPTIMIZATION

Traffic diverted away from Frankfurt hub due to upstream fiber attenuation. Latency stabilized to 14ms.

tsx

<div className="relative w-full max-w-lg 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-4">
    <div className="flex items-center justify-between pb-3 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <Radio className="h-4 w-4 text-cyan-400 animate-pulse" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">LIVE TELEMETRY MONITOR</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">MONITORING</Badge>
    </div>

    <Alert
      variant="glass"
      title="DYNAMIC ROUTE OPTIMIZATION"
      icon={<Zap className="h-4.5 w-4.5 text-cyan-400" />}
    >
      Traffic diverted away from Frankfurt hub due to upstream fiber attenuation. Latency stabilized to 14ms.
    </Alert>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Incident Dispatch Log

Composite mission incident dispatch card with active threat alerts.

SECTOR INCIDENT LOG

3 EVENTS

Realtime incident streams from active sentinels.

INCURSION DETECTED

High-velocity kinetic projectile signature detected in Sector 04-A.

CAPACITOR DRAIN

EMP battery charge at 42%. Solar recharge in progress.

tsx

<Card className="max-w-lg 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">SECTOR INCIDENT LOG</CardTitle>
      <Badge variant="neon" size="sm">3 EVENTS</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Realtime incident streams from active sentinels.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-4">
    <Alert variant="destructive" title="INCURSION DETECTED">
      High-velocity kinetic projectile signature detected in Sector 04-A.
    </Alert>

    <Alert variant="warning" title="CAPACITOR DRAIN">
      EMP battery charge at 42%. Solar recharge in progress.
    </Alert>
  </CardContent>
</Card>

API Reference

PROPERTIES (5)← swipe to inspect →

Property	Description	Type	Default
variant	Visual urgency style and gradient wire preset.	"primary" \| "primary-subtle" \| "primary-outline" \| "neon" \| "info" \| "success" \| "warning" \| "destructive" \| "glass"	"primary-subtle"
title	Bold title displayed at the top of the callout.	string	-
icon	Custom leading icon element. Replaces the default semantic variant icon.	React.ReactNode	-
closable	Displays an interactive dismiss button in the top-right corner.	boolean	false
onClose	Callback fired when the user clicks the dismiss button.	() => void	-

Accessibility

ARIA Role Alert: Automatically applies role="alert" to immediately announce important status updates to assistive technologies.
Focusable Dismiss: The dismiss button is keyboard-focusable with clear focus halos and an explicit aria-label="Dismiss alert".

Best Practices

Alert Placement: Position global system alerts near the top of the viewport and form-level alerts directly above the relevant fields.
Concise Content: Keep alert messages to 1–2 sentences with clear remediation instructions.