| import React from "react" | |
| import { cn } from "lib/utils" | |
| interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { | |
| variant?: "primary" | "secondary" | "ghost" | |
| size?: "sm" | "md" | "lg" | |
| children: React.ReactNode | |
| } | |
| export function Button({ | |
| className, | |
| variant = "primary", | |
| size = "md", | |
| children, | |
| ...props | |
| }: ButtonProps) { | |
| const baseStyles = "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none" | |
| const variants = { | |
| primary: "bg-brand-600 text-white hover:bg-brand-700 focus:ring-brand-500", | |
| secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500", | |
| ghost: "text-gray-700 hover:bg-gray-100 focus:ring-gray-500" | |
| } | |
| const sizes = { | |
| sm: "h-9 px-3 text-sm", | |
| md: "h-10 px-4 text-sm", | |
| lg: "h-11 px-8 text-base" | |
| } | |
| return ( | |
| <button | |
| className={cn(baseStyles, variants[variant], sizes[size], className)} | |
| {...props} | |
| > | |
| {children} | |
| </button> | |
| ) | |
| } |