Design System Library

import React from 'react';

interface ButtonProps {

  variant?: 'primary' | 'secondary' | 'ghost';

  size?: 'sm' | 'md' | 'lg';

  children: React.ReactNode;

  onClick?: () => void;

}

export const Button: React.FC<ButtonProps> = ({

  variant = 'primary',

  size = 'md',

  children,

  onClick,

}) => {

  const baseClasses = 'rounded-lg font-semibold transition-all';

  const variantClasses = {

    primary: 'bg-blue-600 text-white hover:bg-blue-700',

    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',

    ghost: 'bg-transparent hover:bg-gray-100',

  };

  return (

    <button

      className={`${baseClasses} ${variantClasses[variant]}`}

      onClick={onClick}

    >

      {children}

    </button>

  );

};