Untitled

import React from 'react';
import styles from './Button.module.css';

const Button = ({
  children,
  onClick,
  type = 'button',
  variant = 'primary',
  disabled = false,
}) => {
  const buttonClasses = [styles.button, styles[variant]];

  if (disabled) {
    buttonClasses.push(styles.disabled);
  }

  return (
    <button
      className={buttonClasses.join(' ')}
      type={type}
      onClick={disabled ? undefined : onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
};



.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.primary {
  background-color: #007bff;
  color: #ffffff;
}

.primary:hover {
  background-color: #0056b3;
}

.secondary {
  background-color: #6c757d;
  color: #ffffff;
}

.secondary:hover {
  background-color: #5a6268;
}

.disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
}