popcn/ui logopopcn/ui

Button

Aurora-styled button with gradient variants and motion presets.

Installation

npx popcn add button

Playground

<Button variant="aurora" motion="pop" size="md">
  Button
</Button>

Variants

Aurora (default)

Glass

Ghost

Motion Presets

Pop (default)

Float

Shine

Snap

Sizes

All Sizes

With Icons

Icon Buttons

Props

PropTypeDefaultDescription
variant"aurora" | "glass" | "ghost""aurora"Visual style variant
size"sm" | "md" | "lg""md"Button size
motion"pop" | "float" | "shine" | "snap" | "none""pop"Animation preset
leftIconReactNode-Icon on the left
rightIconReactNode-Icon on the right
disabledbooleanfalseDisable the button

Usage

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

export default function Example() {
  return (
    <div className="flex gap-4">
      <Button variant="aurora" motion="pop">
        Primary Action
      </Button>
      <Button variant="glass" motion="shine">
        Secondary
      </Button>
      <Button variant="ghost">
        Cancel
      </Button>
    </div>
  )
}