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;