Button

Stable

A specialized interactive trigger built with semantic hierarchy, cyber glow aura, responsive sizing, and async loading feedback.

Installation

$pnpm add @siberui/react

Import

tsx

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

Primary Action Tier

The primary tier represents the principal user actions on any view. Siber-UI provides three weight gradations of the primary cyan signal color to establish clear visual hierarchy.

tsx

<div className="flex flex-wrap gap-4 items-center">
  {/* Solid filled primary — highest weight */}
  <Button variant="primary">
    Deploy Cluster
  </Button>

  {/* Subtle cyan background — medium weight */}
  <Button variant="primary-subtle">
    Primary Subtle
  </Button>

  {/* Transparent outline — lightweight primary */}
  <Button variant="primary-outline">
    Primary Outline
  </Button>
</div>

variant="primary"

Solid cyan fill. Reserved for the single most important action on a page.

variant="primary-subtle"

12% tint background with cyan border. Great for prominent secondary CTA.

variant="primary-outline"

Transparent background that illuminates cyan on hover with glow feedback.

Secondary & Neutral Tier

Neutral actions provide quiet supporting interactions (cancel, configure, dismiss) without competing with primary call-to-actions.

tsx

<div className="flex flex-wrap gap-4 items-center">
  <Button variant="secondary">Secondary (Surface)</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost (Flat)</Button>
</div>

Semantic Intent Signals

Semantic buttons convey instant meaning through color psychology. success confirms safe operations, while danger highlights irreversible or destructive commands.

tsx

<div className="flex flex-wrap gap-4 items-center">
  {/* Success: Safe operational confirmations */}
  <Button variant="success" leftIcon={<CheckCircle2 className="h-4 w-4" />}>
    Approve Access
  </Button>

  {/* Danger: Destructive / Critical operations */}
  <Button variant="danger" leftIcon={<Trash2 className="h-4 w-4" />}>
    Purge Node
  </Button>
</div>

Cyberpunk Specials (Neon & Terminal)

Signature futuristic styling variants engineered for telemetry dashboards, terminal consoles, and hero cyber interfaces.

tsx

<div className="flex flex-wrap gap-6 items-center">
  {/* Neon: Cyan ambient aura & uppercase tracking */}
  <Button variant="neon" leftIcon={<Zap className="h-4 w-4" />}>
    QUANTUM OVERDRIVE
  </Button>

  {/* Terminal: Lowercase monospace developer console style */}
  <Button variant="terminal" leftIcon={<Terminal className="h-4 w-4" />}>
    $ execute-trace --all
  </Button>
</div>

Glassmorphism Variant

The variant="glass" preset creates a frosted translucent button with a subtle white boundary that refracts ambient textures with cyan edge lighting on hover.

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">
  <Button variant="glass">
    Glass Surface
  </Button>
  <Button variant="glass" leftIcon={<Sparkles className="h-4 w-4 text-cyan-300" />}>
    Frosted Matrix
  </Button>
  <Button variant="glass" size="icon" aria-label="Settings">
    <Sliders className="h-4 w-4 text-cyan-300" />
  </Button>
</div>

Sizes & Icon Buttons

Buttons are available in three standard proportional scales (sm, md, lg) plus a dedicated square icon size.

tsx

<div className="flex flex-wrap items-center gap-4">
  <Button size="sm">Small (32px)</Button>
  <Button size="md">Medium (40px)</Button>
  <Button size="lg">Large (48px)</Button>
  <Button size="icon" variant="outline" aria-label="Quick Settings">
    <Sliders className="h-4 w-4" />
  </Button>
  <Button size="icon" variant="primary" aria-label="Initialize">
    <Play className="h-4 w-4" />
  </Button>
</div>

Cyber Glow Aura

Pass glow={true} to cast an atmospheric, multi-layered cyan aura around the button, creating intense cyberpunk visual emphasis.

tsx

<div className="flex flex-wrap gap-8 items-center">
  {/* Standard button without glow */}
  <Button variant="primary">
    Standard State
  </Button>

  {/* Button with active cyber glow aura */}
  <Button variant="primary" glow leftIcon={<Sparkles className="h-4 w-4" />}>
    Glow Aura Active
  </Button>
</div>

Icons & Loading State

Use leftIcon and rightIcon to enhance button context, or pass isLoading={true} for async network operations.

tsx

<div className="flex flex-wrap gap-4 items-center">
  <Button leftIcon={<Download className="h-4 w-4" />}>
    Export Telemetry
  </Button>
  <Button variant="outline" rightIcon={<ArrowRight className="h-4 w-4" />}>
    Next Node
  </Button>
  <Button variant="primary" isLoading>
    Synchronizing...
  </Button>
  <Button variant="outline" disabled leftIcon={<RotateCcw className="h-4 w-4" />}>
    Disabled
  </Button>
</div>

Toolbar & Action Bar Composition

Here is how different button tiers compose inside real application cards, modal footers, and telemetry control toolbars.

Threat Containment Protocol

Sector 09 anomaly isolation module

GUARD ACTIVE

Executing emergency containment will isolate all external neural pathways and reroute power to the primary core.

tsx

<Card className="max-w-xl mx-auto">
  <CardHeader>
    <Row justify="between" align="center">
      <div>
        <CardTitle>Threat Containment Protocol</CardTitle>
        <CardDescription>Sector 09 anomaly isolation module</CardDescription>
      </div>
      <Badge variant="neon" dot dotColor="green">GUARD ACTIVE</Badge>
    </Row>
  </CardHeader>
  <CardContent>
    <p className="text-sm text-slate-400 leading-relaxed">
      Executing emergency containment will isolate all external neural pathways and reroute power to the primary core.
    </p>
  </CardContent>
  <LayoutDivider />
  <CardFooter className="pt-4 flex justify-between items-center">
    {/* Destructive action on the left */}
    <Button variant="danger" size="sm" leftIcon={<ShieldAlert className="h-4 w-4" />}>
      Emergency Override
    </Button>

    {/* Standard actions grouped on the right */}
    <Row gap="sm">
      <Button variant="ghost" size="sm">
        Cancel
      </Button>
      <Button variant="primary" size="sm" rightIcon={<ArrowRight className="h-3.5 w-3.5" />}>
        Confirm Protocol
      </Button>
    </Row>
  </CardFooter>
</Card>

API Reference

PROPERTIES (8)← swipe to inspect →

Property	Description	Type	Default
variant	The visual style and semantic intent of the button.	"primary" \| "primary-subtle" \| "primary-outline" \| "secondary" \| "outline" \| "ghost" \| "glass" \| "success" \| "danger" \| "neon" \| "terminal"	"primary"
size	Proportional scale of the button padding, height, and typography.	"sm" \| "md" \| "lg" \| "icon"	"md"
glow	Adds an intense multi-layered cyberpunk aura shadow.	boolean	false
isLoading	Replaces left icon with animated spinner and disables user interaction.	boolean	false
leftIcon	React icon element rendered before the text label.	React.ReactNode	-
rightIcon	React icon element rendered after the text label.	React.ReactNode	-
disabled	Disables button interactions and reduces opacity.	boolean	false
asChild	Merges button props onto immediate child element (Radix Slot pattern).	boolean	false

Accessibility

Renders semantic <button> elements with native keyboard activation via Enter and Space.
Focus indicator conforms to WCAG 2.2 AA standards with high-contrast ring offsets.
When isLoading is enabled, buttons set aria-disabled="true" and aria-busy="true".
Always provide descriptive aria-label on icon-only buttons (size="icon") for screen reader accessibility.

Best Practices

Single Primary Rule: Limit variant="primary" to one per card or form section to avoid cognitive dilution.
Action-Oriented Verbs: Use active, unambiguous text labels like "Deploy Node" or "Synchronize Logs" instead of vague words like "Click Here".
Destructive Safety: Always apply variant="danger" for permanent deletions or system terminations, ideally pairing them with confirmation modals or drawers.