fix(elements): size text-only prompt input buttons to their label

packages/elements/__tests__/prompt-input.test.tsx

@@ -4,6 +4,7 @@ import { userEvent } from "@testing-library/user-event";
 import React from "react";
 
 import type { AttachmentData } from "../src/attachments";
+
 import {
   Attachment,
   AttachmentInfo,
@@ -785,7 +786,80 @@ describe("promptInputButton", () => {
         </PromptInputBody>
       </PromptInput>
     );
-    expect(screen.getByRole("button", { name: "Action" })).toBeInTheDocument();
+    const button = screen.getByRole("button", { name: "Action" });
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute("data-size", "sm");
+    expect(button.className).not.toContain("size-8");
+  });
+
+  it("sizes a single wrapped text label as a text button", () => {
+    setupPromptInputTests();
+    const onSubmit = vi.fn();
+    render(
+      <PromptInput onSubmit={onSubmit}>
+        <PromptInputBody>
+          <PromptInputButton>
+            <span>Label</span>
+          </PromptInputButton>
+        </PromptInputBody>
+      </PromptInput>
+    );
+    const button = screen.getByRole("button", { name: "Label" });
+    expect(button).toHaveAttribute("data-size", "sm");
+    expect(button.className).not.toContain("size-8");
+  });
+
+  it("sizes a lone icon as a square icon button", () => {
+    setupPromptInputTests();
+    const onSubmit = vi.fn();
+    render(
+      <PromptInput onSubmit={onSubmit}>
+        <PromptInputBody>
+          <PromptInputButton>
+            <svg>
+              <title>Icon</title>
+            </svg>
+          </PromptInputButton>
+        </PromptInputBody>
+      </PromptInput>
+    );
+    const button = screen.getByRole("button", { name: "Icon" });
+    expect(button).toHaveAttribute("data-size", "icon-sm");
+    expect(button.className).toContain("size-8");
+  });
+
+  it("sizes icon-plus-text as a text button", () => {
+    setupPromptInputTests();
+    const onSubmit = vi.fn();
+    render(
+      <PromptInput onSubmit={onSubmit}>
+        <PromptInputBody>
+          <PromptInputButton>
+            <svg>
+              <title>Icon</title>
+            </svg>
+            Search
+          </PromptInputButton>
+        </PromptInputBody>
+      </PromptInput>
+    );
+    const button = screen.getByRole("button", { name: /search/i });
+    expect(button).toHaveAttribute("data-size", "sm");
+  });
+
+  it("respects an explicit size prop over the heuristic", () => {
+    setupPromptInputTests();
+    const onSubmit = vi.fn();
+    render(
+      <PromptInput onSubmit={onSubmit}>
+        <PromptInputBody>
+          <PromptInputButton size="icon-sm">Action</PromptInputButton>
+        </PromptInputBody>
+      </PromptInput>
+    );
+    const button = screen.getByRole("button", { name: "Action" });
+    expect(button).toHaveAttribute("data-size", "icon-sm");
+    expect(button.className).toContain("size-8");
   });
 
   it("renders button with string tooltip", async () => {

packages/elements/src/prompt-input.tsx

@@ -1,5 +1,20 @@
 "use client";
 
+import type { ChatStatus, FileUIPart, SourceDocumentUIPart } from "ai";
+import type {
+  ChangeEvent,
+  ChangeEventHandler,
+  ClipboardEventHandler,
+  ComponentProps,
+  FormEvent,
+  FormEventHandler,
+  HTMLAttributes,
+  KeyboardEventHandler,
+  PropsWithChildren,
+  ReactNode,
+  RefObject,
+} from "react";
+
 import {
   Command,
   CommandEmpty,
@@ -40,7 +55,6 @@ import {
   TooltipTrigger,
 } from "@repo/shadcn-ui/components/ui/tooltip";
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import type { ChatStatus, FileUIPart, SourceDocumentUIPart } from "ai";
 import {
   CornerDownLeftIcon,
   ImageIcon,
@@ -50,22 +64,10 @@ import {
   XIcon,
 } from "lucide-react";
 import { nanoid } from "nanoid";
-import type {
-  ChangeEvent,
-  ChangeEventHandler,
-  ClipboardEventHandler,
-  ComponentProps,
-  FormEvent,
-  FormEventHandler,
-  HTMLAttributes,
-  KeyboardEventHandler,
-  PropsWithChildren,
-  ReactNode,
-  RefObject,
-} from "react";
 import {
   Children,
   createContext,
+  isValidElement,
   useCallback,
   useContext,
   useEffect,
@@ -78,6 +80,20 @@ import {
 // Helpers
 // ============================================================================
 
+const hasTextContent = (node: ReactNode): boolean => {
+  if (typeof node === "string" || typeof node === "number") {
+    return node !== "";
+  }
+  if (Array.isArray(node)) {
+    return node.some(hasTextContent);
+  }
+  if (isValidElement<{ children?: ReactNode }>(node)) {
+    // Text inside <svg> (e.g. <title>) is accessibility metadata, not a label.
+    return node.type === "svg" ? false : hasTextContent(node.props.children);
+  }
+  return false;
+};
+
 const convertBlobUrlToDataUrl = async (url: string): Promise<string | null> => {
   try {
     const response = await fetch(url);
@@ -1132,7 +1148,10 @@ export const PromptInputButton = ({
   ...props
 }: PromptInputButtonProps) => {
   const newSize =
-    size ?? (Children.count(props.children) > 1 ? "sm" : "icon-sm");
+    size ??
+    (Children.count(props.children) > 1 || hasTextContent(props.children)
+      ? "sm"
+      : "icon-sm");
 
   const button = (
     <InputGroupButton