button.tsx (1913B)
1 import { Slot } from "@radix-ui/react-slot" 2 import { cva, type VariantProps } from "class-variance-authority" 3 4 import { cn } from "@/lib/utils" 5 import { ButtonHTMLAttributes, forwardRef } from "react" 6 7 const buttonVariants = cva( 8 "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", 9 { 10 variants: { 11 variant: { 12 default: "bg-primary text-primary-foreground hover:bg-primary/90", 13 destructive: 14 "bg-destructive text-destructive-foreground hover:bg-destructive/90", 15 outline: 16 "border border-input bg-background hover:bg-accent hover:text-accent-foreground", 17 secondary: 18 "bg-secondary text-secondary-foreground hover:bg-secondary/80", 19 ghost: "hover:bg-accent hover:text-accent-foreground", 20 link: "text-primary underline-offset-4 hover:underline", 21 }, 22 size: { 23 default: "h-10 px-4 py-2", 24 sm: "h-9 rounded-md px-3", 25 lg: "h-11 rounded-md px-8", 26 icon: "h-10 w-10", 27 }, 28 }, 29 defaultVariants: { 30 variant: "default", 31 size: "default", 32 }, 33 } 34 ) 35 36 export interface ButtonProps 37 extends ButtonHTMLAttributes<HTMLButtonElement>, 38 VariantProps<typeof buttonVariants> { 39 asChild?: boolean 40 } 41 42 const Button = forwardRef<HTMLButtonElement, ButtonProps>( 43 ({ className, variant, size, asChild = false, ...props }, ref) => { 44 const Comp = asChild ? Slot : "button" 45 return ( 46 <Comp 47 className={cn(buttonVariants({ variant, size, className }))} 48 ref={ref} 49 {...props} 50 /> 51 ) 52 } 53 ) 54 Button.displayName = "Button" 55 56 export { Button, buttonVariants }