WIP

frontend/src/components/Button.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'outline' | 'text';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const Button: React.FC<ButtonProps> = ({ 
+  variant = 'primary', 
+  size = 'md', 
+  className = '', 
+  children, 
+  ...props 
+}) => {
+  const baseStyles = "inline-flex items-center justify-center rounded-md font-medium transition-all duration-150 ease-out active:scale-98 disabled:opacity-50 disabled:pointer-events-none";
+  
+  const variants = {
+    primary: "bg-warm-text-secondary text-white hover:bg-warm-text-primary shadow-sm",
+    secondary: "bg-white border border-warm-divider text-warm-text-secondary hover:bg-warm-hover",
+    outline: "bg-transparent border border-warm-text-secondary text-warm-text-secondary hover:bg-warm-hover",
+    text: "text-warm-text-muted hover:text-warm-text-primary hover:bg-warm-hover",
+  };
+
+  const sizes = {
+    sm: "h-8 px-3 text-xs",
+    md: "h-10 px-4 text-sm",
+    lg: "h-12 px-6 text-base",
+  };
+
+  return (
+    <button 
+      className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};