Fix Button to render a <button> tag if the 'type' attribute exists. Issue #299

Author: prototypa

src/components/ui/Button.astro

@@ -6,21 +6,35 @@ import type { CallToAction } from '~/types';
 const {
   variant = 'secondary',
   target,
-  text = Astro.slots.render("default"),
+  text = Astro.slots.render('default'),
   icon = '',
   class: className = '',
+  type,
   ...rest
 } = Astro.props as CallToAction;
 
 const variants = {
-  primary: 'btn-primary' ,
+  primary: 'btn-primary',
   secondary: 'btn-secondary',
   tertiary: 'btn btn-tertiary',
   link: 'cursor-pointer hover:text-primary',
 };
 ---
 
-<a class={twMerge(variants[variant] || '', className)} {...target ? { target: target, rel: 'noopener noreferrer' } : {}} {...rest}>
-  <Fragment set:html={text} />
-  {icon && <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" />}
-</a>
+{
+  type === 'button' || type === 'submit' || type === 'reset' ? (
+    <button type={type} class={twMerge(variants[variant] || '', className)} {...rest}>
+      <Fragment set:html={text} />
+      {icon && <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" />}
+    </button>
+  ) : (
+    <a
+      class={twMerge(variants[variant] || '', className)}
+      {...(target ? { target: target, rel: 'noopener noreferrer' } : {})}
+      {...rest}
+    >
+      <Fragment set:html={text} />
+      {icon && <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" />}
+    </a>
+  )
+}

src/types.d.ts

@@ -180,6 +180,7 @@ export interface CallToAction extends HTMLAttributes<a> {
   text?: string;
   icon?: string;
   classes?: Record<string, string>;
+  type?: 'button' | 'submit' | 'reset';
 }
 
 export interface ItemGrid {