Button.jsx

import React from "react";
import { NavLink } from "react-router-dom";
import classNames from "classnames";

const Button = ({
  className,
  iconWrapperClassName,
  icon,
  color = "black",
  iconChildren = null,
  hoverActive = true,
  fullwidth = false,
  loading = false,
  children,
  routerTo,
  ...props
}) => {
  const btnClass = classNames(
    "btn",
    `btn--${color}`,
    {
      "btn--icon": !!icon,
      "btn--hoveractive": hoverActive,
      "btn--fullwidth md:btn--autowidth": fullwidth,
      "btn--loading": loading,
    },
    className
  );

  const iconWrapperClass = classNames("btn__icon", iconWrapperClassName);

  const inner = (
    <div className="btn__body-wrap">
      <div className="btn__body">{children}</div>
      {!!icon && (
        <div className={iconWrapperClass}>
          <i className={icon}></i>
          {iconChildren}
        </div>
      )}
    </div>
  );

  if (routerTo) {
    return (
      <NavLink to={routerTo} className={btnClass} {...props}>
        {inner}
      </NavLink>
    );
  }

  return (
    <button className={btnClass} {...props}>
      {inner}
    </button>
  );
};

export default Button;