Button

Versatile button component with adjustable cyberpunk intensity. From subtle hints to full sci-fi aesthetics with neon glow, clipped corners, and animations.

npx shadcn@latest add https://ui.farstar-studio.com/r/button.json

Preview

Variants

variant

intensity

size

Props

PropTypeDefaultDescription
variant"default" | "outline" | "ghost" | "destructive""default"The visual style of the button
size"default" | "sm" | "lg" | "icon""default"The size of the button
intensity"subtle" | "medium" | "full""subtle"Cyberpunk visual intensity level
animatedbooleantrueEnable/disable animations (respects prefers-reduced-motion)
loadingbooleanfalseShows loading state with data-stream animation
asChildbooleanfalseMerge props onto child element instead of rendering a button
disabledbooleanfalseDisables the button

Usage

Basic Usage

tsx
1import { Button } from "@/registry/zero/ui/button"
2 
3export function Example() {
4  return (
5    <Button>Initialize System</Button>
6  )
7}

Intensity Levels

tsx
1import { Button } from "@/registry/zero/ui/button"
2 
3export function Example() {
4  return (
5    <div className="flex gap-4">
6      <Button intensity="subtle">Subtle</Button>
7      <Button intensity="medium">Medium</Button>
8      <Button intensity="full">Full</Button>
9    </div>
10  )
11}

With Loading State

tsx
1import { Button } from "@/registry/zero/ui/button"
2 
3export function Example() {
4  const [loading, setLoading] = useState(false)
5  
6  return (
7    <Button 
8      loading={loading}
9      onClick={() => setLoading(true)}
10    >
11      {loading ? "Processing..." : "Execute"}
12    </Button>
13  )
14}

Disable Animations

tsx
1import { Button } from "@/registry/zero/ui/button"
2 
3export function Example() {
4  return (
5    <Button intensity="full" animated={false}>
6      Static Button
7    </Button>
8  )
9}