Button

A glass-morphism button with 7 variants, 4 sizes, and Framer Motion tap animation.

Preview

Installation

npx shadcn@latest add @shadszn/button

Usage

import { Button } from "@/components/ui/button"

export default function Example() {
  return <Button variant="primary">Click me</Button>
}

Variants

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="link">Link</Button>
<Button variant="orange">Orange</Button>

Sizes

<Button size="default">Default</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon"><PlusIcon /></Button>

Loading State

<Button loading>Saving...</Button>

Props

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "ghost" \| "destructive" \| "outline" \| "link" \| "orange"	"primary"	Visual style variant.
size	"default" \| "sm" \| "lg" \| "icon"	"default"	Button size.
loading	boolean	false	Shows a loading spinner and disables the button.
asChild	boolean	false	Render as child element via Radix Slot.
disabled	boolean	false	Disables the button.