fix(clerk-react): Prevent props from leaking to child elements in SignUpButton & SignInButton

[tmilewski]

Fix: Prevent Clerk-specific props from leaking to child elements in button components (Core 2 port of #7588)

Problem

When passing unsafeMetadata or appearance props to SignUpButton (or appearance to SignInButton) with a custom child element, these props were incorrectly passed down to the child DOM element via the rest spread. This caused React warnings about invalid HTML attributes since these are Clerk-specific props that should not be applied to DOM elements.

Solution

Destructured appearance and unsafeMetadata (for SignUpButton) and appearance (for SignInButton) directly in the props destructuring statement. By extracting these props before the ...rest spread, they are automatically excluded from the props passed to child elements.

Added @ts-expect-error comments to handle TypeScript union type limitations, as these props only exist when mode === 'modal' according to the SignUpButtonProps and SignInButtonProps type definitions.

Changes

• SignUpButton.tsx: Destructure appearance and unsafeMetadata from props to prevent them from being passed to child elements
• SignInButton.tsx: Destructure appearance from props to prevent it from being passed to child elements
• Tests: Added test cases to verify these props are not leaked to child DOM elements

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[changeset-bot]

🦋 Changeset detected

Latest commit: 33f82e4

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

This PR includes changesets to release 8 packages

Name	Type
@clerk/clerk-react	Patch
@clerk/chrome-extension	Patch
@clerk/elements	Patch
@clerk/clerk-expo	Patch
@clerk/nextjs	Patch
@clerk/react-router	Patch
@clerk/remix	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	Review	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jan 13, 2026 9:19pm

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

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

[pkg-pr-new]

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7589

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7589

@clerk/clerk-expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/clerk-react

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

@clerk/react-router

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

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7589

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7589

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7589

@clerk/upgrade

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

@clerk/vue

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

commit: 33f82e4