From c71f4f076555860d9a2d801caee05d1901e26eae Mon Sep 17 00:00:00 2001
From: ephraimduncan <ephraimduncan68@gmail.com>
Date: Thu, 30 Jul 2026 18:54:29 +0000
Subject: [PATCH] fix(elements): merge consumer className in ConfirmationAction

---
 .../elements/__tests__/confirmation.test.tsx     | 16 ++++++++++++++++
 packages/elements/src/confirmation.tsx           | 16 ++++++++++++----
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/elements/__tests__/confirmation.test.tsx b/packages/elements/__tests__/confirmation.test.tsx
index 28342a2f..387a9d67 100644
--- a/packages/elements/__tests__/confirmation.test.tsx
+++ b/packages/elements/__tests__/confirmation.test.tsx
@@ -230,6 +230,22 @@ describe("confirmationActions", () => {
     const actionsContainer = screen.getByText("Accept").parentElement;
     expect(actionsContainer).toHaveClass("custom-class");
   });
+
+  it("merges custom className on actions without dropping compact sizing", () => {
+    render(
+      <Confirmation approval={{ id: "test-id" }} state="approval-requested">
+        <ConfirmationActions>
+          <ConfirmationAction className="text-destructive" variant="outline">
+            Reject
+          </ConfirmationAction>
+          <ConfirmationAction variant="default">Accept</ConfirmationAction>
+        </ConfirmationActions>
+      </Confirmation>
+    );
+    const reject = screen.getByText("Reject");
+    expect(reject).toHaveClass("text-destructive", "h-8", "px-3", "text-sm");
+    expect(screen.getByText("Accept")).toHaveClass("h-8", "px-3", "text-sm");
+  });
 });
 
 describe("confirmationAccepted", () => {
diff --git a/packages/elements/src/confirmation.tsx b/packages/elements/src/confirmation.tsx
index 7c964383..2bd253f5 100644
--- a/packages/elements/src/confirmation.tsx
+++ b/packages/elements/src/confirmation.tsx
@@ -1,10 +1,11 @@
 "use client";
 
+import type { ToolUIPart } from "ai";
+import type { ComponentProps, ReactNode } from "react";
+
 import { Alert, AlertDescription } from "@repo/shadcn-ui/components/ui/alert";
 import { Button } from "@repo/shadcn-ui/components/ui/button";
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import type { ToolUIPart } from "ai";
-import type { ComponentProps, ReactNode } from "react";
 import { createContext, useContext, useMemo } from "react";
 
 type ToolUIPartApproval =
@@ -164,6 +165,13 @@ export const ConfirmationActions = ({
 
 export type ConfirmationActionProps = ComponentProps<typeof Button>;
 
-export const ConfirmationAction = (props: ConfirmationActionProps) => (
-  <Button className="h-8 px-3 text-sm" type="button" {...props} />
+export const ConfirmationAction = ({
+  className,
+  ...props
+}: ConfirmationActionProps) => (
+  <Button
+    className={cn("h-8 px-3 text-sm", className)}
+    type="button"
+    {...props}
+  />
 );