Allow rendering Button component as <a> or <button>

[MAILPOET-2784]

assets/js/src/common/button/button.tsx

@@ -12,6 +12,7 @@ type Props = {
   iconEnd?: JSX.Element,
   onClick?: () => void,
   href?: string,
+  type?: string,
   target?: '_blank' | '_self' | '_parent' | '_top' | string,
 };
 
@@ -27,28 +28,31 @@ const Button = ({
   onClick,
   href,
   target,
-}: Props) => (
+}: Props) => {
-  <a
+  const Element = href ? 'a' : 'button';
-    href={href}
+  return (
-    onClick={onClick}
+    <Element
-    target={target}
+      href={href}
-    className={
+      onClick={onClick}
-      classnames(
+      target={target}
-        'mailpoet-button',
+      className={
-        {
+        classnames(
-          [`mailpoet-button-${dimension}`]: dimension,
+          'mailpoet-button',
-          [`mailpoet-button-${variant}`]: variant,
+          {
-          'mailpoet-button-with-spinner': withSpinner,
+            [`mailpoet-button-${dimension}`]: dimension,
-          'mailpoet-disabled': isDisabled,
+            [`mailpoet-button-${variant}`]: variant,
-          'mailpoet-full-width': isFullWidth,
+            'mailpoet-button-with-spinner': withSpinner,
-        }
+            'mailpoet-disabled': isDisabled,
-      )
+            'mailpoet-full-width': isFullWidth,
-    }
+          }
-  >
+        )
-    {iconStart}
+      }
-    {children && <span>{children}</span>}
+    >
-    {iconEnd}
+      {iconStart}
-  </a>
+      {children && <span>{children}</span>}
-);
+      {iconEnd}
+    </Element>
+  );
+};
 
 export default Button;