fix(Button): default to non-submitting type

Co-authored-by: Swad K. <svadrutk@users.noreply.github.com>

Author: cursoragent

src/components/Button/index.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from "@testing-library/react";
-import { describe, it, expect } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
 import { Button } from "./";
 
 describe("Button", () => {
@@ -20,4 +20,41 @@ describe("Button", () => {
     expect(text).toHaveClass("text-trim-cap");
     expect(text).not.toHaveClass("relative"); // button wrapper has 'relative', text span does not
   });
+
+  it("defaults to type button so it does not submit a parent form", () => {
+    const onSubmit = vi.fn((event: React.FormEvent) => event.preventDefault());
+
+    render(
+      <form onSubmit={onSubmit}>
+        <Button>Discover</Button>
+      </form>,
+    );
+
+    const button = screen.getByRole("button", { name: "Discover" });
+    expect(button).toHaveAttribute("type", "button");
+
+    fireEvent.click(button);
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("preserves an explicit submit type", () => {
+    render(<Button type="submit">Authorize</Button>);
+
+    expect(screen.getByRole("button", { name: "Authorize" })).toHaveAttribute(
+      "type",
+      "submit",
+    );
+  });
+
+  it("does not pass the default type to an asChild element", () => {
+    render(
+      <Button asChild>
+        <a href="/discover">Discover</a>
+      </Button>,
+    );
+
+    expect(screen.getByRole("link", { name: "Discover" })).not.toHaveAttribute(
+      "type",
+    );
+  });
 });

src/components/Button/index.tsx

@@ -213,6 +213,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       context = "product",
       asChild = false,
       className,
+      type,
       onMouseEnter,
       onMouseLeave,
       onMouseDown,
@@ -486,6 +487,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         onMouseMove={handleMouseMove}
         onMouseDown={handleMouseDown}
         onMouseUp={handleMouseUp}
+        {...(!asChild ? { type: type ?? "button" } : {})}
         {...(asChild ? { isBrandVariant } : {})}
         {...props}
       >