|
| 1 | +import type { HTMLAttributes, ReactNode } from "react"; |
| 2 | + |
| 3 | +type ButtonVariant = |
| 4 | + | "default" |
| 5 | + | "destructive" |
| 6 | + | "outline" |
| 7 | + | "secondary" |
| 8 | + | "ghost" |
| 9 | + | "link"; |
| 10 | + |
| 11 | +type ButtonSize = "default" | "sm" | "lg" | "icon"; |
| 12 | + |
| 13 | +interface ButtonProps extends HTMLAttributes<HTMLButtonElement> { |
| 14 | + variant?: ButtonVariant; |
| 15 | + size?: ButtonSize; |
| 16 | + asChild?: boolean; |
| 17 | + children?: ReactNode; |
| 18 | + disabled?: boolean; |
| 19 | + type?: "button" | "submit" | "reset"; |
| 20 | +} |
| 21 | + |
| 22 | +function getButtonClasses( |
| 23 | + variant: ButtonVariant = "default", |
| 24 | + size: ButtonSize = "default", |
| 25 | +): string { |
| 26 | + // Base classes |
| 27 | + const baseClasses = |
| 28 | + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] cursor-pointer"; |
| 29 | + |
| 30 | + // Variant classes |
| 31 | + const variantClasses = { |
| 32 | + default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", |
| 33 | + destructive: |
| 34 | + "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20", |
| 35 | + outline: |
| 36 | + "border text-foreground bg-background shadow-xs hover:bg-accent hover:text-accent-foreground border-border", |
| 37 | + secondary: |
| 38 | + "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", |
| 39 | + ghost: "hover:bg-accent hover:text-accent-foreground", |
| 40 | + link: "text-primary underline-offset-4 hover:underline", |
| 41 | + }; |
| 42 | + |
| 43 | + // Size classes |
| 44 | + const sizeClasses = { |
| 45 | + default: "h-10 px-4 py-2", |
| 46 | + sm: "h-8 gap-1.5 px-3", |
| 47 | + lg: "h-10 px-6", |
| 48 | + icon: "size-10", |
| 49 | + }; |
| 50 | + |
| 51 | + return `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`; |
| 52 | +} |
| 53 | + |
| 54 | +export function Button({ |
| 55 | + className = "", |
| 56 | + variant = "default", |
| 57 | + size = "default", |
| 58 | + children, |
| 59 | + disabled = false, |
| 60 | + type = "button", |
| 61 | + ...props |
| 62 | +}: ButtonProps) { |
| 63 | + const buttonClasses = getButtonClasses(variant, size); |
| 64 | + |
| 65 | + return ( |
| 66 | + <button |
| 67 | + type={type} |
| 68 | + disabled={disabled} |
| 69 | + className={`${buttonClasses} ${className}`} |
| 70 | + {...props} |
| 71 | + > |
| 72 | + {children} |
| 73 | + </button> |
| 74 | + ); |
| 75 | +} |
0 commit comments