Project Initialization

packages/ui-common/src/components/Button/Button.tsx

@@ -0,0 +1,46 @@
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+import clsx from 'clsx';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  isLoading?: boolean;
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary: 'bg-blue-600 text-white hover:bg-blue-700 disabled:bg-blue-300',
+  secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 disabled:bg-gray-50',
+  ghost: 'bg-transparent text-gray-900 hover:bg-gray-100',
+  danger: 'bg-red-600 text-white hover:bg-red-700 disabled:bg-red-300',
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: 'px-3 py-1.5 text-sm',
+  md: 'px-4 py-2 text-base',
+  lg: 'px-6 py-3 text-lg',
+};
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = 'primary', size = 'md', isLoading, disabled, className, children, ...rest }, ref) => (
+    <button
+      ref={ref}
+      disabled={disabled || isLoading}
+      className={clsx(
+        'inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:cursor-not-allowed',
+        variantClasses[variant],
+        sizeClasses[size],
+        className,
+      )}
+      {...rest}
+    >
+      {isLoading ? 'Loading...' : children}
+    </button>
+  ),
+);
+
+Button.displayName = 'Button';
+
+export default Button;

packages/ui-common/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';