export const ButtonTypes = Object.freeze({
  PRIMARY: "primary",
  SECONDARY: "secondary",
  TERTIARY: "tertiary"
});
 
export const ButtonSizes = Object.freeze({
  SMALL: "small",
  MEDIUM: "medium",
  LARGE: "large"
});
 
export const ButtonThemes = Object.freeze({
  LIGHT: "light",
  DARK: "dark"
});
export const ButtonTypes = Object.freeze({
  PRIMARY: "primary",
  SECONDARY: "secondary",
  TERTIARY: "tertiary"
});
 
export const ButtonSizes = Object.freeze({
  SMALL: "small",
  MEDIUM: "medium",
  LARGE: "large"
});
 
export const ButtonThemes = Object.freeze({
  LIGHT: "light",
  DARK: "dark"
});
export const ButtonTypes = Object.freeze({
  PRIMARY: "primary",
  SECONDARY: "secondary",
  TERTIARY: "tertiary"
});
 
export const ButtonSizes = Object.freeze({
  SMALL: "small",
  MEDIUM: "medium",
  LARGE: "large"
});
 
export const ButtonThemes = Object.freeze({
  LIGHT: "light",
  DARK: "dark"
});

// Button.jsx
 
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ButtonTypes, ButtonSizes, ButtonThemes } from './buttonTypes';
import './button.css'
 
export default class Button extends Component {
 
    ...
 
    render() {
        const { disabled, onClickHandler, label } = this.props;
        return (
            <button
                className={this.getButtonClasses()}
                onClick={event => onClickHandler(event)}
                disabled={disabled}
            >
            {label}
            </button>
        );
    }
}

// Button.jsx
 
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ButtonTypes, ButtonSizes, ButtonThemes } from './buttonTypes';
import './button.css'
 
export default class Button extends Component {
    getButtonClasses() {
        const { icon, size, theme, type } = this.props;
        const buttonClasses = [
            'button',
            `button--${size}`,
            `button--${theme}`,
            `button--${type}`
        ];
 
        return buttonClasses.join(' ');
    }
 
 
    render() {
 
        ...
 
        );
    }
}

// Icons.jsx
 
import React, { Component } from "react";
import PropTypes from "prop-types";
import { IconTypes } from "./iconTypes";
 
const SaveIcon = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      className='button__icon'
    >
      <title>Save</title>
      ...
    </svg>
  );
};
 
export default class Icon extends Component {
  render() {
    ...
  }
}

// Icons.jsx
import React, { Component } from "react";
import PropTypes from "prop-types";
import { IconTypes } from "./iconTypes";
 
const SaveIcon = () => {
  ...
};
 
export default class Icon extends Component {
  render() {
    const { icon } = this.props;
    switch (icon) {
      case IconTypes.SAVE:
        return <SaveIcon />;
 
      default:
        return null;
    }
  }
}
 
Icon.propTypes = {
  icon: PropTypes.oneOf(Object.values(IconTypes))
};
 
Icon.defaultProps = {
  icon: IconTypes.NONE
};

// Button.jsx
 
...
import { IconTypes } from "./iconTypes";
import Icon from "./Icons";
 
 
export default class Button extends Component {
  getButtonClasses() {
    const { icon, size, theme, type } = this.props;
    const buttonClasses = [
      "button",
      `button--${size}`,
      `button--${theme}`,
      `button--${type}`
    ];
 
    icon && icon !== IconTypes.NONE && buttonClasses.push("button--icon");
 
    return buttonClasses.join(" ");
  }
 
  ...
 
}

// Button.jsx
 
...
 
export default class Button extends Component {
  getButtonClasses() {
    const { icon, size, theme, type } = this.props;
    ...
  }
 
  render() {
    const { disabled, onClickHandler, label, icon } = this.props;
    return (
      <button
        className={this.getButtonClasses()}
        onClick={event => onClickHandler(event.target)}
        disabled={disabled}
      >
        {icon && <Icon icon={icon} />}
        {label}
      </button>
    );
  }
 
}

// Button.jsx
 
...
 
Button.propTypes = {
  type: PropTypes.oneOf(Object.values(ButtonTypes)),
  disabled: PropTypes.bool,
  onClickHandler: PropTypes.func.isRequired,
  label: PropTypes.string.isRequired,
  size: PropTypes.oneOf(Object.values(ButtonSizes)),
  theme: PropTypes.oneOf(Object.values(ButtonThemes)),
  icon: PropTypes.oneOf(Object.values(IconTypes))
};
 
Button.defaultProps = {
  type: ButtonTypes.PRIMARY,
  onClickHandler: () => console.log("No click handler specified"),
  label: "",
  disabled: false,
  size: ButtonSizes.MEDIUM,
  theme: ButtonThemes.LIGHT,
  icon: IconTypes.NONE
};
// Button.jsx
 
...
 
Button.propTypes = {
  type: PropTypes.oneOf(Object.values(ButtonTypes)),
  disabled: PropTypes.bool,
  onClickHandler: PropTypes.func.isRequired,
  label: PropTypes.string.isRequired,
  size: PropTypes.oneOf(Object.values(ButtonSizes)),
  theme: PropTypes.oneOf(Object.values(ButtonThemes)),
  icon: PropTypes.oneOf(Object.values(IconTypes))
};
 
Button.defaultProps = {
  type: ButtonTypes.PRIMARY,
  onClickHandler: () => console.log("No click handler specified"),
  label: "",
  disabled: false,
  size: ButtonSizes.MEDIUM,
  theme: ButtonThemes.LIGHT,
  icon: IconTypes.NONE
};

<Button
  size={ButtonSizes.MEDIUM}
  label="Button"
  onClickHandler={() => alert("you clicked!")}
  type={ButtonTypes.PRIMARY}
/>
 
<Button
  size={ButtonSizes.SMALL}
  label="Button"
  onClickHandler={() => alert("you clicked!")}
  type={ButtonTypes.PRIMARY}
/>
 
<Button
  size={ButtonSizes.LARGE}
  label="Button"
  theme={ButtonThemes.DARK}
  onClickHandler={() => alert("you clicked!")}
  type={ButtonTypes.PRIMARY}
/>