From 84bb247bd87b61d028b443256842ac5c5c8ab622 Mon Sep 17 00:00:00 2001
From: Jeff Escalante <jescalan@users.noreply.github.com>
Date: Thu, 14 May 2026 18:55:51 -0500
Subject: [PATCH] fix unstyled button single array child

---
 .changeset/smooth-buttons-accept-one.md       |  5 ++++
 .../__tests__/SignInButton.test.tsx           | 24 +++++++++++++++++++
 packages/react/src/utils/childrenUtils.tsx    |  6 +++++
 3 files changed, 35 insertions(+)
 create mode 100644 .changeset/smooth-buttons-accept-one.md

diff --git a/.changeset/smooth-buttons-accept-one.md b/.changeset/smooth-buttons-accept-one.md
new file mode 100644
index 00000000000..6e986eed219
--- /dev/null
+++ b/.changeset/smooth-buttons-accept-one.md
@@ -0,0 +1,5 @@
+---
+'@clerk/react': patch
+---
+
+Allow unstyled button components to accept a single React element passed as an array.
diff --git a/packages/react/src/components/__tests__/SignInButton.test.tsx b/packages/react/src/components/__tests__/SignInButton.test.tsx
index 03523dd2d15..de3e0e30304 100644
--- a/packages/react/src/components/__tests__/SignInButton.test.tsx
+++ b/packages/react/src/components/__tests__/SignInButton.test.tsx
@@ -89,6 +89,30 @@ describe('<SignInButton/>', () => {
     expect(mockRedirectToSignIn).toHaveBeenCalled();
   });
 
+  it('accepts a single child passed as an array', async () => {
+    const handler = vi.fn();
+
+    render(
+      <SignInButton>
+        {[
+          <button
+            key='custom'
+            onClick={handler}
+            type='button'
+          >
+            custom button
+          </button>,
+        ]}
+      </SignInButton>,
+    );
+
+    const btn = screen.getByText('custom button');
+    await userEvent.click(btn);
+
+    expect(handler).toHaveBeenCalled();
+    expect(mockRedirectToSignIn).toHaveBeenCalled();
+  });
+
   it('uses text passed as children', async () => {
     render(<SignInButton>text</SignInButton>);
 
diff --git a/packages/react/src/utils/childrenUtils.tsx b/packages/react/src/utils/childrenUtils.tsx
index 0e231b2241c..73b26c8c4af 100644
--- a/packages/react/src/utils/childrenUtils.tsx
+++ b/packages/react/src/utils/childrenUtils.tsx
@@ -18,6 +18,12 @@ export const assertSingleChild =
     try {
       return React.Children.only(children);
     } catch {
+      const childArray = React.Children.toArray(children);
+
+      if (childArray.length === 1 && React.isValidElement(childArray[0])) {
+        return childArray[0];
+      }
+
       return errorThrower.throw(multipleChildrenInButtonComponent(name));
     }
   };