File size: 1,623 Bytes
eb846d0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import React from 'react';
import { cn } from '../../utils/cn';
type ButtonVariant = 'default' | 'outline' | 'ghost' | 'link' | 'destructive';
type ButtonSize = 'default' | 'sm' | 'lg' | 'icon';
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: ButtonVariant;
size?: ButtonSize;
asChild?: boolean;
children: React.ReactNode;
}
const variantStyles: Record<ButtonVariant, string> = {
default: 'bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500',
outline: 'border border-gray-300 dark:border-gray-700 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300',
ghost: 'bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300',
link: 'bg-transparent underline-offset-4 hover:underline text-blue-500 hover:text-blue-600',
destructive: 'bg-red-500 text-white hover:bg-red-600 focus:ring-red-500',
};
const sizeStyles: Record<ButtonSize, string> = {
default: 'h-10 py-2 px-4',
sm: 'h-8 px-3 text-sm',
lg: 'h-12 px-6',
icon: 'h-10 w-10 p-0',
};
export function Button({
variant = 'default',
size = 'default',
className,
disabled,
children,
...props
}: ButtonProps) {
return (
<button
className={cn(
'rounded-md inline-flex items-center justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none',
variantStyles[variant],
sizeStyles[size],
className
)}
disabled={disabled}
{...props}
>
{children}
</button>
);
} |