Button

Stable

A specialized interactive element for triggering actions. Supports multiple variants, sizes, and states with cyberpunk-inspired styling and hover effects.

Installation

$pnpm add @siberui/react

Import

tsx

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

Examples

Primary

The default button style used for primary actions.

tsx

<Button variant="primary">Initialize System</Button>

Variants

We offer multiple cyberpunk variants to establish visual hierarchy.

tsx

<div className="flex gap-4">
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="neon">Neon Cyan</Button>
  <Button variant="neonPurple">Neon Purple</Button>
  <Button variant="neonGreen">Neon Green</Button>
  <Button variant="destructive">Destructive</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
</div>

Sizes

Different sizes for varying contexts and layouts.

tsx

<div className="flex items-center gap-4">
  <Button size="sm">Small (sm)</Button>
  <Button size="md">Medium (md)</Button>
  <Button size="lg">Large (lg)</Button>
  <Button size="icon"><Zap className="h-4 w-4" /></Button>
</div>

With Icons

Buttons can include icons for better visual context.

tsx

<div className="flex gap-4">
  <Button leftIcon={<ShieldAlert className="h-4 w-4" />}>
    Scan Network
  </Button>
  <Button variant="outline" rightIcon={<Zap className="h-4 w-4" />}>
    Execute
  </Button>
</div>

States

Disabled and loading states.

tsx

<div className="flex gap-4">
  <Button disabled>Disabled</Button>
  <Button isLoading>Processing...</Button>
</div>

API Reference

Property	Description	Type	Default
variant	The visual style variant of the button.	"primary" \| "secondary" \| "neon" \| "neonPurple" \| "neonGreen" \| "ghost" \| "destructive" \| "outline"	"primary"
size	The size of the button.	"sm" \| "md" \| "lg" \| "icon"	"md"
glow	Adds an intense cyberpunk glow shadow effect.	boolean	false
isLoading	Displays a loading spinner and disables the button.	boolean	false
leftIcon	Icon element to display before the text.	React.ReactNode	-
rightIcon	Icon element to display after the text.	React.ReactNode	-
asChild	Change the underlying component to the passed child element.	boolean	false

Accessibility

Uses the native <button> element.
Keyboard focus is clearly visible with an emerald ring to comply with WCAG 2.2 AA.
When isLoading is true, the button adds aria-disabled="true" to prevent interaction while remaining readable.
Icon-only buttons should always include an aria-label or <span className="sr-only"> text for screen readers.

Best Practices

Hierarchy: Use only one primary button per screen or section to guide the user's primary action.
Clarity: Button text should be clear, concise, and action-oriented (e.g., "Deploy Protocol" instead of "Submit").
Destructive Actions: Always use the destructive variant for actions that cannot be undone (e.g., deleting data, terminating sessions). Consider pairing with a confirmation dialog.