diff --git a/ui/litellm-dashboard/src/components/ui/alert-dialog.test.tsx b/ui/litellm-dashboard/src/components/ui/alert-dialog.test.tsx
new file mode 100644
index 00000000000..4b0a197b129
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/ui/alert-dialog.test.tsx
@@ -0,0 +1,61 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./alert-dialog";
+import { Button } from "./button";
+
+function ConfirmDialog({ onConfirm }: { onConfirm: () => void }) {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger render={<Button>Open</Button>} />
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete this?</AlertDialogTitle>
+          <AlertDialogDescription>Cannot be undone</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={onConfirm}>Confirm</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+describe("AlertDialog", () => {
+  it("fires the action handler and closes the dialog on confirm", async () => {
+    const user = userEvent.setup();
+    const onConfirm = vi.fn();
+    render(<ConfirmDialog onConfirm={onConfirm} />);
+
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    expect(screen.getByText("Delete this?")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Confirm" }));
+
+    expect(onConfirm).toHaveBeenCalledOnce();
+    expect(screen.queryByText("Delete this?")).not.toBeInTheDocument();
+  });
+
+  it("closes without firing the action on cancel", async () => {
+    const user = userEvent.setup();
+    const onConfirm = vi.fn();
+    render(<ConfirmDialog onConfirm={onConfirm} />);
+
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+
+    expect(onConfirm).not.toHaveBeenCalled();
+    expect(screen.queryByText("Delete this?")).not.toBeInTheDocument();
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/ui/alert-dialog.tsx b/ui/litellm-dashboard/src/components/ui/alert-dialog.tsx
index 34c45e81055..164dc310ae7 100644
--- a/ui/litellm-dashboard/src/components/ui/alert-dialog.tsx
+++ b/ui/litellm-dashboard/src/components/ui/alert-dialog.tsx
@@ -122,8 +122,20 @@ function AlertDialogDescription({
   );
 }
 
-function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {
-  return <Button data-slot="alert-dialog-action" className={cn(className)} {...props} />;
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  );
 }
 
 function AlertDialogCancel({