tr-button-component/index.js

button,primary,secondary,disable,active,hover

function createButton(options = {}) {
    const {
      text = 'Button',
      type = 'default',
      size='default',
      width = 'auto',
      disabled = false,
      active = false,
      hover = false,
    } = options;
  
    let buttonStyle = `width: ${width};`;
    buttonStyle += 'border: none;';
    buttonStyle += 'cursor: pointer;';
    buttonStyle += 'border-radius: 32px;';
    switch(type){
        case 'primary' :
            buttonStyle += `background-color: #17BAE0;`;
            buttonStyle += `color: #fff;`;
            break;
        case 'secondary' :
            buttonStyle += `background-color: #FFF;`;
            buttonStyle += `color: #17BAE0;`;
            break;
        case 'disable':
            buttonStyle += `background-color: #828282;`;
            buttonStyle += `color: #17BAE0;`;
            buttonStyle += 'cursor: not-allowed;';

        default:
            buttonStyle += `background-color: #828282;`;
            buttonStyle += `color: #fff;`;

    }
    switch(size){
        case 'medium' :
            buttonStyle += `padding: 10px 20px;`;
            break;
        case 'small' :
            buttonStyle += `padding: 8px 16px;`;
            break;
        default:
            buttonStyle += `padding: 12px 24px;`;


    }
    
    return `<button style="${buttonStyle}" ${disabled ? 'disabled' : ''}>${text}</button>`;
  };
  
  module.exports = createButton;