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

[jescalan]

Summary

• Allow Clerk's unstyled button components to accept a single valid React element when React passes it as a one-item children array.
• Keep the existing multiple-children error for real multi-child input.
• Add a SignInButton regression test for the one-item array child shape.
• Add a patch changeset for @clerk/react.

Context

SignInButton currently validates custom children with React.Children.only(). That is correct for normal JSX, but it also rejects one-item arrays. In a Next.js App Router server/client boundary, a custom child rendered through Show can reach the client button wrapper in that array shape even though the source JSX contains a single <button>.

The resulting runtime error says multiple children were passed to <SignInButton />, which is misleading for users who supplied one custom child.

[changeset-bot]

🦋 Changeset detected

Latest commit: 84bb247

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@clerk/react	Patch
@clerk/chrome-extension	Patch
@clerk/expo	Patch
@clerk/nextjs	Patch
@clerk/react-router	Patch
@clerk/tanstack-react-start	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	May 14, 2026 11:57pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 93b8b069-a222-4584-9f71-3313bfe4aab9

📥 Commits

Reviewing files that changed from the base of the PR and between 54ddc2f and 84bb247.

📒 Files selected for processing (3)

• .changeset/smooth-buttons-accept-one.md
• packages/react/src/components/__tests__/SignInButton.test.tsx
• packages/react/src/utils/childrenUtils.tsx

---

📝 Walkthrough

Walkthrough

This PR extends button component validation to accept a single React element passed as an array. The core change modifies assertSingleChild in childrenUtils.tsx to convert children to an array, validate exactly one valid React element exists, and return it or throw an error. A new test case verifies SignInButton correctly handles array-wrapped children and invokes both the child's click handler and clerk.redirectToSignIn. A changeset entry documents the patch release and new behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix(react): accept single array child in unstyled buttons' clearly and concisely summarizes the main change: enabling unstyled button components to accept a single child passed as an array.
Description check	✅ Passed	The description is well-related to the changeset, explaining the problem context, the solution, and listing all key changes including the validation logic update, test addition, and changeset creation.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8556

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8556

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8556

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8556

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8556

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8556

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8556

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8556

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8556

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8556

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8556

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8556

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8556

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8556

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8556

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8556

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8556

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8556

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8556

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8556

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8556

commit: 84bb247