Button.tsx (1789B)
1 import * as React from "react" 2 import { Slot } from "@radix-ui/react-slot" 3 import { cva, type VariantProps } from "class-variance-authority" 4 5 import { cn } from "@/lib/utils" 6 7 const buttonVariants = cva( 8 "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background active:scale-95 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", 9 { 10 variants: { 11 variant: { 12 default: "bg-white text-gray-800 hover:text-gray-700", 13 accent: "bg-gradient-to-r from-damuspink-600 to-damuspink-500 hover:brightness-110 text-white", 14 destructive: 15 "bg-red-500 text-white hover:bg-red-500/90", 16 secondary: "rounded-full bg-white/10 text-white hover:bg-white/20 hover:scale-105 active:bg-white/5 active:scale-95", 17 link: "text-transparent bg-clip-text bg-gradient-to-r from-damuspink-500 to-damuspink-600", 18 }, 19 size: { 20 default: "h-10 px-4 py-2", 21 sm: "h-9 rounded-md px-3", 22 lg: "h-11 rounded-md px-8", 23 icon: "h-10 w-10", 24 }, 25 }, 26 defaultVariants: { 27 variant: "default", 28 size: "default", 29 }, 30 } 31 ) 32 33 export interface ButtonProps 34 extends React.ButtonHTMLAttributes<HTMLButtonElement>, 35 VariantProps<typeof buttonVariants> { 36 asChild?: boolean 37 } 38 39 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( 40 ({ className, variant, size, asChild = false, ...props }, ref) => { 41 const Comp = asChild ? Slot : "button" 42 return ( 43 <Comp 44 className={cn(buttonVariants({ variant, size, className }))} 45 ref={ref} 46 {...props} 47 /> 48 ) 49 } 50 ) 51 Button.displayName = "Button" 52 53 export { Button, buttonVariants }