@acodez/button/src/ssbutton.jsx

react button component with custom styles

import React from "react";
import Styles from "./ssbutton.module.scss";
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom'

function SSButton({ btnSize, btnColor, btnType, children, btnStyle, btnBorder, btnWidth, btnIconPos, link, ...other }) {
  const classes = [
      Styles.button,
      Styles[btnSize],
      Styles[btnType],
      Styles[btnColor],
      Styles[btnStyle],
      Styles[btnBorder],
      Styles[btnWidth],
      Styles[btnIconPos],
    ].join(" ");
  if(link){
      return (
            <Link to={link}
              className={classes}
              {...other}
            >
              {children}
            </Link>
        );
  }
      return (
            <button
              className={classes}
              {...other}
            >
              {children}
            </button>
        );

}

export default SSButton;

SSButton.propTypes = {
  btnSize:PropTypes.oneOf(['xs','sm', 'md', 'lg']),
  btnColor:PropTypes.oneOf(['primary', 'secondary', 'danger', 'success', 'warning', 'dark', 'light', 'info']),
  btnType:PropTypes.oneOf(['icon', 'text', 'textWithIcon', 'spinner']),
  btnStyle:PropTypes.oneOf(['solid', 'outline', 'transparent']),
  btnBorder:PropTypes.oneOf(['square', 'round']),
  btnWidth:PropTypes.oneOf(['auto', 'full']),
  btnIconPos:PropTypes.oneOf(['left', 'right'])
};

SSButton.defaultProps = {
  btnSize: "md",
  btnColor: "primary",
  btnStyle: "solid",
  btnType: "textWithIcon",
  btnBorder: "round",
  btnWidth: "auto",
  btnIconPos: "left",
  children: "Button"
};