button.tsx
1 import { cn } from "../../lib/util"; 2 import { Slot } from "@radix-ui/react-slot"; 3 import { cva, type VariantProps } from "class-variance-authority"; 4 import * as React from "react"; 5 6 const buttonVariants = cva( 7 "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", 8 { 9 variants: { 10 variant: { 11 default: "bg-primary text-primary-foreground hover:bg-primary/90", 12 destructive: 13 "bg-destructive text-destructive-foreground hover:bg-destructive/90", 14 outline: 15 "border border-input bg-background hover:bg-accent hover:text-accent-foreground", 16 secondary: 17 "bg-secondary text-secondary-foreground hover:bg-secondary/80", 18 ghost: "hover:bg-accent hover:text-accent-foreground", 19 link: "text-primary underline-offset-4 hover:underline", 20 }, 21 size: { 22 default: "h-10 px-4 py-2", 23 sm: "h-9 rounded-md px-3", 24 lg: "h-11 rounded-md px-8", 25 icon: "h-10 w-10", 26 }, 27 }, 28 defaultVariants: { 29 variant: "default", 30 size: "default", 31 }, 32 } 33 ); 34 35 export interface ButtonProps 36 extends React.ButtonHTMLAttributes<HTMLButtonElement>, 37 VariantProps<typeof buttonVariants> { 38 asChild?: boolean; 39 } 40 41 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( 42 ({ className, variant, size, asChild = false, ...props }, ref) => { 43 const Comp = asChild ? Slot : "button"; 44 return ( 45 <Comp 46 className={cn(buttonVariants({ variant, size, className }))} 47 ref={ref} 48 {...props} 49 /> 50 ); 51 } 52 ); 53 Button.displayName = "Button"; 54 55 export { Button, buttonVariants };