fix(react): accept single array child in unstyled buttons

.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.

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>);
 

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));
     }
   };