From a34c3bbf23c3fedd0ae7f0c64060909191a00068 Mon Sep 17 00:00:00 2001
From: 0xPratik <sariapratik@gmail.com>
Date: Thu, 29 Oct 2026 18:12:47 +0545
Subject: [PATCH] fix(button)!: default to type="button"

Button rendered a native <button> with no type, so HTML treated every
bare Button as a submit button: inside a host form, activating it
submitted the form. That is the stalled "Load earlier messages" control
in ConversationEarlier and the Retry control in SendStatusLine.

Button now renders type="button" unless a type is passed. asChild gets
no injected type, since the slotted child may not be a button.

BREAKING CHANGE: a bare Button no longer submits a form. Pass
type="submit" for a submit button.

Addresses #142 findings 8 and 9.
---
 src/ui/button.test.tsx | 81 ++++++++++++++++++++++++++++++++++++++++++
 src/ui/button.tsx      |  6 ++++
 2 files changed, 87 insertions(+)
 create mode 100644 src/ui/button.test.tsx

diff --git a/src/ui/button.test.tsx b/src/ui/button.test.tsx
new file mode 100644
index 00000000..227cf767
--- /dev/null
+++ b/src/ui/button.test.tsx
@@ -0,0 +1,81 @@
+import { describe, expect, mock, test } from "bun:test";
+import { act, createElement, type ReactElement } from "react";
+import { createRoot } from "react-dom/client";
+
+import { Button } from "./button.js";
+
+function mountInForm(child: ReactElement) {
+  const onSubmit = mock((event: Event) => event.preventDefault());
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  act(() => {
+    root.render(createElement("form", { onSubmit }, child));
+  });
+  return {
+    onSubmit,
+    container,
+    unmount: () => {
+      act(() => root.unmount());
+      container.remove();
+    },
+  };
+}
+
+describe("Button", () => {
+  test("a bare Button inside a form does not submit it", () => {
+    const { onSubmit, container, unmount } = mountInForm(
+      createElement(Button, null, "Retry"),
+    );
+    const button = container.querySelector("button") as HTMLButtonElement;
+
+    expect(button.getAttribute("type")).toBe("button");
+    act(() => {
+      button.click();
+    });
+    expect(onSubmit).not.toHaveBeenCalled();
+    unmount();
+  });
+
+  test("a forwarded type={undefined} keeps the button default", () => {
+    const { onSubmit, container, unmount } = mountInForm(
+      createElement(Button, { type: undefined }, "Retry"),
+    );
+    const button = container.querySelector("button") as HTMLButtonElement;
+
+    expect(button.getAttribute("type")).toBe("button");
+    act(() => {
+      button.click();
+    });
+    expect(onSubmit).not.toHaveBeenCalled();
+    unmount();
+  });
+
+  test('type="submit" still submits the form', () => {
+    const { onSubmit, container, unmount } = mountInForm(
+      createElement(Button, { type: "submit" }, "Sign in"),
+    );
+    const button = container.querySelector("button") as HTMLButtonElement;
+
+    expect(button.getAttribute("type")).toBe("submit");
+    act(() => {
+      button.click();
+    });
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    unmount();
+  });
+
+  test("asChild gets no injected type", () => {
+    const { container, unmount } = mountInForm(
+      createElement(
+        Button,
+        { asChild: true },
+        createElement("a", { href: "#docs" }, "Docs"),
+      ),
+    );
+    const link = container.querySelector("a") as HTMLAnchorElement;
+
+    expect(link.hasAttribute("type")).toBe(false);
+    unmount();
+  });
+});
diff --git a/src/ui/button.tsx b/src/ui/button.tsx
index 03ace2d3..7360a3e0 100644
--- a/src/ui/button.tsx
+++ b/src/ui/button.tsx
@@ -69,11 +69,17 @@ export function Button({
   variant,
   size,
   asChild = false,
+  // A native button with no type submits its form; default to "button" so a
+  // Button never submits a host form unasked. A destructured default also
+  // covers a forwarded `type={undefined}`, which a spread would let through.
+  // A slotted child may not be a button, so it gets no type.
+  type = asChild ? undefined : "button",
   ...props
 }: ButtonProps) {
   const Comp = asChild ? Slot : "button";
   return (
     <Comp
+      type={type}
       data-slot="button"
       className={cn(buttonVariants({ variant, size }), className)}
       {...props}