typescript
import { ButtonHTMLAttributes, forwardRef } from 'react';
import { clsx } from 'clsx';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    variant?: 'primary' | 'secondary' | 'ghost'; 
    size?: 'sm' | 'md' | 'lg';
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant = 'primary', size = 'md', children, ...props }, ref) => (
    <button 
        ref={ref} 
        className={clsx(
            'inline-flex items-center justify-center rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none',
            { 
                'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500': variant === 'primary', 
                'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500': variant === 'secondary', 
                'bg-transparent hover:bg-gray-100 focus:ring-gray-500': variant === 'ghost',
                'px-3 py-1.5 text-sm': size === 'sm', 
                'px-4 py-2 text-base': size === 'md', 
                'px-6 py-3 text-lg': size === 'lg' 
            }, 
            className
        )} 
        {...props}
    >
        {children}
    </button>
));

</html>