Button.js

import React from 'react';
import PropTypes from 'prop-types';
import { classNames } from 'core/utils';

import {
  btn,
  btn_fluid,
  btn_short,
  btn_small,
  btn_success,
  btn_error,
  btn_primary,
} from './Button.module.scss';

const STYLE_TYPES = {
  success: 'success',
  error: 'error',
  primary: 'primary',
}

const Button = ({
  disabled,
  fluid,
  short,
  small,
  styleType,
  children,
  ...props,
}) => (
    <button
      {...props}
      className={classNames(btn, {
        [btn_fluid]: fluid,
        [btn_short]: short,
        [btn_small]: small,
        [btn_success]: styleType === STYLE_TYPES.success,
        [btn_error]: styleType === STYLE_TYPES.error,
        [btn_primary]: styleType === STYLE_TYPES.primary,
      })}
      disabled={disabled}
      type="button">
      {children}
    </button>
  )

Button.propTypes = {
  disabled: PropTypes.bool,
  short: PropTypes.bool,
  fluid: PropTypes.bool,
  styleType: PropTypes.oneOf(Object.keys(STYLE_TYPES)),
  error: PropTypes.bool,
};

Button.defaultProps = {};

export { Button };

Button.module.css

.btn {
  padding: 0 14px;
  width: 240px;
  max-width: 100%;
  max-height: 45px;
  line-height: 40px;
  font-size: 15px;
  text-transform: uppercase;
  text-overflow: ellipsis;
  word-break: keep-all;
  line-break: auto;
  letter-spacing: 0.2em;
  border-radius: 0.15em;
  border: 0 none;
  background-color: #f5f5f5;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.16s;
}

.btn .material-icons, .btn > span {
  vertical-align: middle;
}

.btn:hover {
  background-color: #eee;
}

.btn:active {
  background-color: #e0e0e0;
}

.btn:disabled {
  cursor: default;
}

.btn:disabled:hover {
  background-color: #f5f5f5;
}

.btn.btn_success {
  color: #fff;
  background-color: #a2cf6e;
}

.btn.btn_success:hover {
  background-color: #8bc34a;
}

.btn.btn_success:active {
  background-color: #618833;
}

.btn.btn_primary {
  color: #fff;
  background-color: #6e85cf;
}

.btn.btn_primary:hover {
  background-color: #4a4cc3;
}

.btn.btn_primary:active {
  background-color: #334088;
}

.btn.btn_error {
  color: #fff;
  background-color: #ff8c68;
}

.btn.btn_error:hover {
  background-color: #ff7043;
}

.btn.btn_error:active {
  background-color: #b24e2e;
}

.btn.btn_fluid {
  width: 100%;
}

.btn.btn_short {
  width: unset;
}

.btn.btn_small {
  padding: 0 7px;
  line-height: 28px;
  font-size: 12px;
  text-transform: capitalize;
}