| 1 |
import * as React from "react"; |
| 2 |
|
| 3 |
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { |
| 4 |
variant?: "default" | "outline" | "ghost" | "destructive"; |
| 5 |
size?: "default" | "sm" | "lg" | "icon"; |
| 6 |
} |
| 7 |
|
| 8 |
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( |
| 9 |
( |
| 10 |
{ className = "", variant = "default", size = "default", ...props }, |
| 11 |
ref, |
| 12 |
) => { |
| 13 |
const baseClasses = |
| 14 |
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"; |
| 15 |
|
| 16 |
const variantClasses = { |
| 17 |
default: |
| 18 |
"bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600", |
| 19 |
outline: |
| 20 |
"border border-gray-300 bg-transparent hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800", |
| 21 |
ghost: "hover:bg-gray-100 dark:hover:bg-gray-800", |
| 22 |
destructive: |
| 23 |
"bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600", |
| 24 |
}; |
| 25 |
|
| 26 |
const sizeClasses = { |
| 27 |
default: "h-10 px-4 py-2", |
| 28 |
sm: "h-9 rounded-md px-3", |
| 29 |
lg: "h-11 rounded-md px-8", |
| 30 |
icon: "h-10 w-10", |
| 31 |
}; |
| 32 |
|
| 33 |
return ( |
| 34 |
<button |
| 35 |
className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`} |
| 36 |
ref={ref} |
| 37 |
{...props} |
| 38 |
/> |
| 39 |
); |
| 40 |
}, |
| 41 |
); |
| 42 |
Button.displayName = "Button"; |
| 43 |
|
| 44 |
export { Button }; |
| 45 |
|
