button-component-sample-library/index.js

button,primary,secondary,disable,active,hover

// button.js

function createButton(options = {}) {
    const {
      text = 'Button',
      primary = false,
      color = 'gray',
      width = 'auto',
      disabled = false,
      active = false,
      hover = false,
    } = options;
  
    let buttonStyle = `background-color: ${primary ? 'blue' : color};`;
    buttonStyle += `width: ${width};`;
    buttonStyle += 'padding: 10px 20px;';
    buttonStyle += 'border: none;';
    buttonStyle += 'cursor: pointer;';
  
    if (hover) {
      buttonStyle += `&:hover { background-color: ${hover}; }`;
    }
  
    if (active) {
      buttonStyle += `&:active { background-color: ${active}; }`;
    }
  
    if (disabled) {
      buttonStyle += `background-color: gray; cursor: not-allowed;`;
    }
  
    return `<button style="${buttonStyle}" ${disabled ? 'disabled' : ''}>${text}</button>`;
  }
  
  module.exports = createButton;