From 1830fa98d4865b80bab8b33cb4302f3d9b0e4881 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 10 Feb 2025 15:47:15 -0500
Subject: [PATCH 01/10] feat(react): Add appearance option to modal components

---
 .../react/src/components/SignInButton.tsx     |  2 +-
 .../react/src/components/SignUpButton.tsx     |  2 +-
 packages/react/src/types.ts                   | 21 ++++++++++++++-----
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/SignInButton.tsx b/packages/react/src/components/SignInButton.tsx
index a18ba92e57c..76f5d1d74f1 100644
--- a/packages/react/src/components/SignInButton.tsx
+++ b/packages/react/src/components/SignInButton.tsx
@@ -31,7 +31,7 @@ export const SignInButton = withClerk(
       };
 
       if (mode === 'modal') {
-        return clerk.openSignIn(opts);
+        return clerk.openSignIn({ ...opts, appearance: props.appearance });
       }
       return clerk.redirectToSignIn({
         ...opts,
diff --git a/packages/react/src/components/SignUpButton.tsx b/packages/react/src/components/SignUpButton.tsx
index 757439c24da..547ce4725a9 100644
--- a/packages/react/src/components/SignUpButton.tsx
+++ b/packages/react/src/components/SignUpButton.tsx
@@ -32,7 +32,7 @@ export const SignUpButton = withClerk(
       };
 
       if (mode === 'modal') {
-        return clerk.openSignUp(opts);
+        return clerk.openSignUp({ ...opts, appearance: props.appearance });
       }
 
       return clerk.redirectToSignUp({
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index cab42fd9950..fdd2dd74f64 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -109,12 +109,20 @@ export type ClerkProp =
   | undefined
   | null;
 
-type ButtonProps = {
-  mode?: 'redirect' | 'modal';
+type ButtonPropsModal<T extends SignInProps | SignUpProps> = {
+  mode: 'modal';
+  appearance: T['appearance'];
+  children?: React.ReactNode;
+};
+
+type ButtonPropsRedirect = {
+  mode?: 'redirect';
   children?: React.ReactNode;
 };
 
-export type SignInButtonProps = ButtonProps &
+type ButtonProps<T extends SignInProps | SignUpProps> = ButtonPropsModal<T> | ButtonPropsRedirect;
+
+export type SignInButtonProps = ButtonProps<SignInProps> &
   Pick<
     SignInProps,
     | 'fallbackRedirectUrl'
@@ -127,7 +135,7 @@ export type SignInButtonProps = ButtonProps &
 
 export type SignUpButtonProps = {
   unsafeMetadata?: SignUpUnsafeMetadata;
-} & ButtonProps &
+} & ButtonProps<SignUpProps> &
   Pick<
     SignUpProps,
     | 'fallbackRedirectUrl'
@@ -137,7 +145,10 @@ export type SignUpButtonProps = {
     | 'initialValues'
   >;
 
-export type SignInWithMetamaskButtonProps = ButtonProps & RedirectUrlProp;
+export type SignInWithMetamaskButtonProps = {
+  mode?: 'redirect' | 'modal';
+  children?: React.ReactNode;
+} & RedirectUrlProp;
 
 export type RedirectToSignInProps = SignInRedirectOptions;
 export type RedirectToSignUpProps = SignUpRedirectOptions;

From 2e34fd11dc5604b89c43c0526dac5db9634fcb20 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 10 Feb 2025 15:54:23 -0500
Subject: [PATCH 02/10] add changeset

---
 .changeset/yellow-bats-provide.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/yellow-bats-provide.md

diff --git a/.changeset/yellow-bats-provide.md b/.changeset/yellow-bats-provide.md
new file mode 100644
index 00000000000..03e11307c72
--- /dev/null
+++ b/.changeset/yellow-bats-provide.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-react': patch
+---
+
+Add the ability to specify an appearance for modal component usages.

From f7bf109cb74730663b7bd51398f468a5a412cee6 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 10 Feb 2025 16:22:57 -0500
Subject: [PATCH 03/10] appearance is optional

---
 packages/react/src/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index fdd2dd74f64..b8ee4d271f2 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -111,7 +111,7 @@ export type ClerkProp =
 
 type ButtonPropsModal<T extends SignInProps | SignUpProps> = {
   mode: 'modal';
-  appearance: T['appearance'];
+  appearance?: T['appearance'];
   children?: React.ReactNode;
 };
 

From e07cdbcd3143743833d432aa7cca37e16baf1bfc Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 10 Feb 2025 17:25:02 -0500
Subject: [PATCH 04/10] extract type to clerk/types

---
 packages/astro/src/react/SignInButton.tsx    |  2 +-
 packages/astro/src/react/SignUpButton.tsx    |  2 +-
 packages/astro/src/react/types.ts            | 24 +++----------
 packages/react/src/types.ts                  | 36 +++-----------------
 packages/types/src/clerk.ts                  | 34 ++++++++++++++++++
 packages/vue/src/components/SignInButton.vue | 16 ++-------
 packages/vue/src/components/SignUpButton.vue | 13 ++-----
 7 files changed, 49 insertions(+), 78 deletions(-)

diff --git a/packages/astro/src/react/SignInButton.tsx b/packages/astro/src/react/SignInButton.tsx
index d519108efc0..2e6e5e06b16 100644
--- a/packages/astro/src/react/SignInButton.tsx
+++ b/packages/astro/src/react/SignInButton.tsx
@@ -25,7 +25,7 @@ export const SignInButton = withClerk(({ clerk, children, ...props }: WithClerkP
     }
 
     if (mode === 'modal') {
-      return clerk.openSignIn(opts);
+      return clerk.openSignIn({ ...opts, appearance: props.appearance });
     }
     return clerk.redirectToSignIn({
       ...opts,
diff --git a/packages/astro/src/react/SignUpButton.tsx b/packages/astro/src/react/SignUpButton.tsx
index b37651e5609..1026e68951e 100644
--- a/packages/astro/src/react/SignUpButton.tsx
+++ b/packages/astro/src/react/SignUpButton.tsx
@@ -34,7 +34,7 @@ export const SignUpButton = withClerk(({ clerk, children, ...props }: WithClerkP
     }
 
     if (mode === 'modal') {
-      return clerk.openSignUp(opts);
+      return clerk.openSignUp({ ...opts, appearance: props.appearance });
     }
 
     return clerk.redirectToSignUp({
diff --git a/packages/astro/src/react/types.ts b/packages/astro/src/react/types.ts
index 3028beaaf5d..003faafb9bc 100644
--- a/packages/astro/src/react/types.ts
+++ b/packages/astro/src/react/types.ts
@@ -1,23 +1,9 @@
-import type { SignInProps, SignUpProps } from '@clerk/types';
+import type { SignInButtonProps as _SignInButtonProps, SignUpButtonProps as _SignUpButtonProps } from '@clerk/types';
 
-// TODO-SHARED: Duplicate from @clerk/clerk-react
-type ButtonProps = {
-  mode?: 'redirect' | 'modal';
+export type SignInButtonProps = _SignInButtonProps & {
   children?: React.ReactNode;
 };
 
-// TODO-SHARED: Duplicate from @clerk/clerk-react
-export type SignInButtonProps = ButtonProps &
-  Pick<
-    SignInProps,
-    'fallbackRedirectUrl' | 'forceRedirectUrl' | 'signUpForceRedirectUrl' | 'signUpFallbackRedirectUrl'
-  >;
-
-// TODO-SHARED: Duplicate from @clerk/clerk-react
-export type SignUpButtonProps = {
-  unsafeMetadata?: SignUpUnsafeMetadata;
-} & ButtonProps &
-  Pick<
-    SignUpProps,
-    'fallbackRedirectUrl' | 'forceRedirectUrl' | 'signInForceRedirectUrl' | 'signInFallbackRedirectUrl'
-  >;
+export type SignUpButtonProps = _SignUpButtonProps & {
+  children?: React.ReactNode;
+};
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index b8ee4d271f2..318cd7ee6d5 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -7,9 +7,9 @@ import type {
   LoadedClerk,
   MultiDomainAndOrProxy,
   RedirectUrlProp,
-  SignInProps,
+  SignInButtonProps as _SignInButtonProps,
   SignInRedirectOptions,
-  SignUpProps,
+  SignUpButtonProps as _SignUpButtonProps,
   SignUpRedirectOptions,
   Without,
 } from '@clerk/types';
@@ -109,42 +109,14 @@ export type ClerkProp =
   | undefined
   | null;
 
-type ButtonPropsModal<T extends SignInProps | SignUpProps> = {
-  mode: 'modal';
-  appearance?: T['appearance'];
+export type SignInButtonProps = _SignInButtonProps & {
   children?: React.ReactNode;
 };
 
-type ButtonPropsRedirect = {
-  mode?: 'redirect';
+export type SignUpButtonProps = _SignUpButtonProps & {
   children?: React.ReactNode;
 };
 
-type ButtonProps<T extends SignInProps | SignUpProps> = ButtonPropsModal<T> | ButtonPropsRedirect;
-
-export type SignInButtonProps = ButtonProps<SignInProps> &
-  Pick<
-    SignInProps,
-    | 'fallbackRedirectUrl'
-    | 'forceRedirectUrl'
-    | 'signUpForceRedirectUrl'
-    | 'signUpFallbackRedirectUrl'
-    | 'initialValues'
-    | 'withSignUp'
-  >;
-
-export type SignUpButtonProps = {
-  unsafeMetadata?: SignUpUnsafeMetadata;
-} & ButtonProps<SignUpProps> &
-  Pick<
-    SignUpProps,
-    | 'fallbackRedirectUrl'
-    | 'forceRedirectUrl'
-    | 'signInForceRedirectUrl'
-    | 'signInFallbackRedirectUrl'
-    | 'initialValues'
-  >;
-
 export type SignInWithMetamaskButtonProps = {
   mode?: 'redirect' | 'modal';
   children?: React.ReactNode;
diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
index 474a0a279e6..8a58fffe1d0 100644
--- a/packages/types/src/clerk.ts
+++ b/packages/types/src/clerk.ts
@@ -1388,6 +1388,40 @@ export interface HandleEmailLinkVerificationParams {
   onVerifiedOnOtherDevice?: () => void;
 }
 
+type ButtonPropsModal<T extends SignInProps | SignUpProps> = {
+  mode: 'modal';
+  appearance?: T['appearance'];
+};
+
+type ButtonPropsRedirect = {
+  mode?: 'redirect';
+};
+
+type ButtonProps<T extends SignInProps | SignUpProps> = ButtonPropsModal<T> | ButtonPropsRedirect;
+
+export type SignInButtonProps = ButtonProps<SignInProps> &
+  Pick<
+    SignInProps,
+    | 'fallbackRedirectUrl'
+    | 'forceRedirectUrl'
+    | 'signUpForceRedirectUrl'
+    | 'signUpFallbackRedirectUrl'
+    | 'initialValues'
+    | 'withSignUp'
+  >;
+
+export type SignUpButtonProps = {
+  unsafeMetadata?: SignUpUnsafeMetadata;
+} & ButtonProps<SignUpProps> &
+  Pick<
+    SignUpProps,
+    | 'fallbackRedirectUrl'
+    | 'forceRedirectUrl'
+    | 'signInForceRedirectUrl'
+    | 'signInFallbackRedirectUrl'
+    | 'initialValues'
+  >;
+
 export type CreateOrganizationInvitationParams = {
   emailAddress: string;
   role: OrganizationCustomRoleKey;
diff --git a/packages/vue/src/components/SignInButton.vue b/packages/vue/src/components/SignInButton.vue
index 42aed6a6e4e..9b085f8c87c 100644
--- a/packages/vue/src/components/SignInButton.vue
+++ b/packages/vue/src/components/SignInButton.vue
@@ -1,21 +1,9 @@
 <script setup lang="ts">
 import { useAttrs, useSlots } from 'vue';
-import type { SignInProps } from '@clerk/types';
+import type { SignInButtonProps } from '@clerk/types';
 import { useClerk } from '../composables/useClerk';
 import { assertSingleChild, normalizeWithDefaultValue } from '../utils';
 
-type SignInButtonProps = Pick<
-  SignInProps,
-  | 'fallbackRedirectUrl'
-  | 'forceRedirectUrl'
-  | 'signUpForceRedirectUrl'
-  | 'signUpFallbackRedirectUrl'
-  | 'initialValues'
-  | 'withSignUp'
-> & {
-  mode?: 'modal' | 'redirect';
-};
-
 const props = defineProps<SignInButtonProps>();
 
 const clerk = useClerk();
@@ -31,7 +19,7 @@ function clickHandler() {
   const { mode, ...opts } = props;
 
   if (mode === 'modal') {
-    return clerk.value?.openSignIn(opts);
+    return clerk.value?.openSignIn({ ...opts, appearance: props.appearance });
   }
 
   const { withSignUp, ...redirectOpts } = opts;
diff --git a/packages/vue/src/components/SignUpButton.vue b/packages/vue/src/components/SignUpButton.vue
index 60e5bb0becc..7d68e995619 100644
--- a/packages/vue/src/components/SignUpButton.vue
+++ b/packages/vue/src/components/SignUpButton.vue
@@ -1,18 +1,9 @@
 <script setup lang="ts">
 import { useAttrs, useSlots } from 'vue';
-import type { SignUpProps } from '@clerk/types';
+import type { SignUpButtonProps } from '@clerk/types';
 import { useClerk } from '../composables/useClerk';
 import { assertSingleChild, normalizeWithDefaultValue } from '../utils';
 
-type SignUpButtonProps = {
-  unsafeMetadata?: SignUpUnsafeMetadata;
-} & Pick<
-  SignUpProps,
-  'fallbackRedirectUrl' | 'forceRedirectUrl' | 'signInForceRedirectUrl' | 'signInFallbackRedirectUrl' | 'initialValues'
-> & {
-    mode?: 'modal' | 'redirect';
-  };
-
 const props = defineProps<SignUpButtonProps>();
 
 const clerk = useClerk();
@@ -28,7 +19,7 @@ function clickHandler() {
   const { mode, ...opts } = props;
 
   if (mode === 'modal') {
-    return clerk.value?.openSignUp(opts);
+    return clerk.value?.openSignUp({ ...opts, appearance: props.appearance });
   }
 
   void clerk.value?.redirectToSignUp({

From c1c724e92144953c88e359c99bcf1f0de055c53a Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 10 Feb 2025 17:26:22 -0500
Subject: [PATCH 05/10] add changeset

---
 .changeset/few-news-impress.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .changeset/few-news-impress.md

diff --git a/.changeset/few-news-impress.md b/.changeset/few-news-impress.md
new file mode 100644
index 00000000000..8468619f5b2
--- /dev/null
+++ b/.changeset/few-news-impress.md
@@ -0,0 +1,8 @@
+---
+'@clerk/astro': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+'@clerk/vue': patch
+---
+
+Add the ability to specify an appearance for modal component usages.

From 9f5ae19cfe66525b6e9138d09f6988ea7d76e0dc Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Mon, 10 Feb 2025 17:26:36 -0500
Subject: [PATCH 06/10] Delete .changeset/yellow-bats-provide.md

---
 .changeset/yellow-bats-provide.md | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 .changeset/yellow-bats-provide.md

diff --git a/.changeset/yellow-bats-provide.md b/.changeset/yellow-bats-provide.md
deleted file mode 100644
index 03e11307c72..00000000000
--- a/.changeset/yellow-bats-provide.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@clerk/clerk-react': patch
----
-
-Add the ability to specify an appearance for modal component usages.

From f10339f66890720bc8565d7905496c7c05bda518 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Tue, 11 Feb 2025 09:00:21 -0500
Subject: [PATCH 07/10] refactor to use PropsWithChildren

---
 packages/astro/src/react/SignInButton.tsx     | 78 ++++++++--------
 packages/astro/src/react/SignUpButton.tsx     | 88 ++++++++++---------
 .../react/src/components/SignInButton.tsx     |  6 +-
 .../react/src/components/SignUpButton.tsx     |  6 +-
 packages/react/src/types.ts                   | 10 ---
 5 files changed, 91 insertions(+), 97 deletions(-)

diff --git a/packages/astro/src/react/SignInButton.tsx b/packages/astro/src/react/SignInButton.tsx
index 2e6e5e06b16..69049990bf7 100644
--- a/packages/astro/src/react/SignInButton.tsx
+++ b/packages/astro/src/react/SignInButton.tsx
@@ -1,46 +1,48 @@
-import type { SignInProps } from '@clerk/types';
+import type { SignInButtonProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
-import type { SignInButtonProps } from './types';
 import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk, type WithClerkProp } from './utils';
 
 export type { SignInButtonProps };
 
-export const SignInButton = withClerk(({ clerk, children, ...props }: WithClerkProp<SignInButtonProps>) => {
-  const { signUpFallbackRedirectUrl, forceRedirectUrl, fallbackRedirectUrl, signUpForceRedirectUrl, mode, ...rest } =
-    props;
-  children = normalizeWithDefaultValue(children, 'Sign in');
-  const child = assertSingleChild(children)('SignInButton');
-
-  const clickHandler = () => {
-    const opts: SignInProps = {
-      forceRedirectUrl,
-      fallbackRedirectUrl,
-      signUpFallbackRedirectUrl,
-      signUpForceRedirectUrl,
+export const SignInButton = withClerk(
+  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<SignInButtonProps>>) => {
+    const { signUpFallbackRedirectUrl, forceRedirectUrl, fallbackRedirectUrl, signUpForceRedirectUrl, mode, ...rest } =
+      props;
+    children = normalizeWithDefaultValue(children, 'Sign in');
+    const child = assertSingleChild(children)('SignInButton');
+
+    const clickHandler = () => {
+      const opts: SignInProps = {
+        forceRedirectUrl,
+        fallbackRedirectUrl,
+        signUpFallbackRedirectUrl,
+        signUpForceRedirectUrl,
+      };
+
+      if (!clerk) {
+        return;
+      }
+
+      if (mode === 'modal') {
+        return clerk.openSignIn({ ...opts, appearance: props.appearance });
+      }
+      return clerk.redirectToSignIn({
+        ...opts,
+        signInFallbackRedirectUrl: fallbackRedirectUrl,
+        signInForceRedirectUrl: forceRedirectUrl,
+      });
     };
 
-    if (!clerk) {
-      return;
-    }
-
-    if (mode === 'modal') {
-      return clerk.openSignIn({ ...opts, appearance: props.appearance });
-    }
-    return clerk.redirectToSignIn({
-      ...opts,
-      signInFallbackRedirectUrl: fallbackRedirectUrl,
-      signInForceRedirectUrl: forceRedirectUrl,
-    });
-  };
-
-  const wrappedChildClickHandler: React.MouseEventHandler = async e => {
-    if (child && typeof child === 'object' && 'props' in child) {
-      await safeExecute(child.props.onClick)(e);
-    }
-    return clickHandler();
-  };
-
-  const childProps = { ...rest, onClick: wrappedChildClickHandler };
-  return React.cloneElement(child as React.ReactElement<unknown>, childProps);
-}, 'SignInButton');
+    const wrappedChildClickHandler: React.MouseEventHandler = async e => {
+      if (child && typeof child === 'object' && 'props' in child) {
+        await safeExecute(child.props.onClick)(e);
+      }
+      return clickHandler();
+    };
+
+    const childProps = { ...rest, onClick: wrappedChildClickHandler };
+    return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+  },
+  'SignInButton',
+);
diff --git a/packages/astro/src/react/SignUpButton.tsx b/packages/astro/src/react/SignUpButton.tsx
index 1026e68951e..9b54416ae5c 100644
--- a/packages/astro/src/react/SignUpButton.tsx
+++ b/packages/astro/src/react/SignUpButton.tsx
@@ -1,56 +1,58 @@
-import type { SignUpProps } from '@clerk/types';
+import type { SignUpButtonProps, SignUpProps } from '@clerk/types';
 import React from 'react';
 
-import type { SignUpButtonProps } from './types';
 import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk, type WithClerkProp } from './utils';
 
 export type { SignUpButtonProps };
 
-export const SignUpButton = withClerk(({ clerk, children, ...props }: WithClerkProp<SignUpButtonProps>) => {
-  const {
-    fallbackRedirectUrl,
-    forceRedirectUrl,
-    signInFallbackRedirectUrl,
-    signInForceRedirectUrl,
-    mode,
-    unsafeMetadata,
-    ...rest
-  } = props;
-
-  children = normalizeWithDefaultValue(children, 'Sign up');
-  const child = assertSingleChild(children)('SignUpButton');
-
-  const clickHandler = () => {
-    const opts: SignUpProps = {
+export const SignUpButton = withClerk(
+  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<SignUpButtonProps>>) => {
+    const {
       fallbackRedirectUrl,
       forceRedirectUrl,
       signInFallbackRedirectUrl,
       signInForceRedirectUrl,
+      mode,
       unsafeMetadata,
+      ...rest
+    } = props;
+
+    children = normalizeWithDefaultValue(children, 'Sign up');
+    const child = assertSingleChild(children)('SignUpButton');
+
+    const clickHandler = () => {
+      const opts: SignUpProps = {
+        fallbackRedirectUrl,
+        forceRedirectUrl,
+        signInFallbackRedirectUrl,
+        signInForceRedirectUrl,
+        unsafeMetadata,
+      };
+
+      if (!clerk) {
+        return;
+      }
+
+      if (mode === 'modal') {
+        return clerk.openSignUp({ ...opts, appearance: props.appearance });
+      }
+
+      return clerk.redirectToSignUp({
+        ...opts,
+        signUpFallbackRedirectUrl: fallbackRedirectUrl,
+        signUpForceRedirectUrl: forceRedirectUrl,
+      });
     };
 
-    if (!clerk) {
-      return;
-    }
-
-    if (mode === 'modal') {
-      return clerk.openSignUp({ ...opts, appearance: props.appearance });
-    }
-
-    return clerk.redirectToSignUp({
-      ...opts,
-      signUpFallbackRedirectUrl: fallbackRedirectUrl,
-      signUpForceRedirectUrl: forceRedirectUrl,
-    });
-  };
-
-  const wrappedChildClickHandler: React.MouseEventHandler = async e => {
-    if (child && typeof child === 'object' && 'props' in child) {
-      await safeExecute(child.props.onClick)(e);
-    }
-    return clickHandler();
-  };
-
-  const childProps = { ...rest, onClick: wrappedChildClickHandler };
-  return React.cloneElement(child as React.ReactElement<unknown>, childProps);
-}, 'SignUpButton');
+    const wrappedChildClickHandler: React.MouseEventHandler = async e => {
+      if (child && typeof child === 'object' && 'props' in child) {
+        await safeExecute(child.props.onClick)(e);
+      }
+      return clickHandler();
+    };
+
+    const childProps = { ...rest, onClick: wrappedChildClickHandler };
+    return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+  },
+  'SignUpButton',
+);
diff --git a/packages/react/src/components/SignInButton.tsx b/packages/react/src/components/SignInButton.tsx
index 76f5d1d74f1..d985bc2bcca 100644
--- a/packages/react/src/components/SignInButton.tsx
+++ b/packages/react/src/components/SignInButton.tsx
@@ -1,12 +1,12 @@
-import type { SignInProps } from '@clerk/types';
+import type { SignInButtonProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
-import type { SignInButtonProps, WithClerkProp } from '../types';
+import type { WithClerkProp } from '../types';
 import { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';
 import { withClerk } from './withClerk';
 
 export const SignInButton = withClerk(
-  ({ clerk, children, ...props }: WithClerkProp<SignInButtonProps>) => {
+  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<SignInButtonProps>>) => {
     const {
       signUpFallbackRedirectUrl,
       forceRedirectUrl,
diff --git a/packages/react/src/components/SignUpButton.tsx b/packages/react/src/components/SignUpButton.tsx
index 547ce4725a9..b4b6ac27363 100644
--- a/packages/react/src/components/SignUpButton.tsx
+++ b/packages/react/src/components/SignUpButton.tsx
@@ -1,12 +1,12 @@
-import type { SignUpProps } from '@clerk/types';
+import type { SignUpButtonProps, SignUpProps } from '@clerk/types';
 import React from 'react';
 
-import type { SignUpButtonProps, WithClerkProp } from '../types';
+import type { WithClerkProp } from '../types';
 import { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';
 import { withClerk } from './withClerk';
 
 export const SignUpButton = withClerk(
-  ({ clerk, children, ...props }: WithClerkProp<SignUpButtonProps>) => {
+  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<SignUpButtonProps>>) => {
     const {
       fallbackRedirectUrl,
       forceRedirectUrl,
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index 318cd7ee6d5..97f03064cab 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -7,9 +7,7 @@ import type {
   LoadedClerk,
   MultiDomainAndOrProxy,
   RedirectUrlProp,
-  SignInButtonProps as _SignInButtonProps,
   SignInRedirectOptions,
-  SignUpButtonProps as _SignUpButtonProps,
   SignUpRedirectOptions,
   Without,
 } from '@clerk/types';
@@ -109,14 +107,6 @@ export type ClerkProp =
   | undefined
   | null;
 
-export type SignInButtonProps = _SignInButtonProps & {
-  children?: React.ReactNode;
-};
-
-export type SignUpButtonProps = _SignUpButtonProps & {
-  children?: React.ReactNode;
-};
-
 export type SignInWithMetamaskButtonProps = {
   mode?: 'redirect' | 'modal';
   children?: React.ReactNode;

From 4b8057b464dbea011c4bab41303dfe0856b67ee3 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Tue, 11 Feb 2025 09:05:07 -0500
Subject: [PATCH 08/10] add changeset

---
 .changeset/giant-fans-pretend.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/giant-fans-pretend.md

diff --git a/.changeset/giant-fans-pretend.md b/.changeset/giant-fans-pretend.md
new file mode 100644
index 00000000000..a909decc24a
--- /dev/null
+++ b/.changeset/giant-fans-pretend.md
@@ -0,0 +1,5 @@
+---
+'@clerk/types': minor
+---
+
+Extract common button component props.

From 356f547aca9cf550ae8395d5f200e13b55f6160e Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Tue, 11 Feb 2025 09:35:33 -0500
Subject: [PATCH 09/10] Apply suggestions from code review

---
 .changeset/few-news-impress.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.changeset/few-news-impress.md b/.changeset/few-news-impress.md
index 8468619f5b2..92c9bc503ac 100644
--- a/.changeset/few-news-impress.md
+++ b/.changeset/few-news-impress.md
@@ -1,7 +1,6 @@
 ---
 '@clerk/astro': patch
 '@clerk/clerk-react': patch
-'@clerk/types': patch
 '@clerk/vue': patch
 ---
 

From d6918649c3379be3e79daba63ec8871aeca4629c Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Tue, 11 Feb 2025 10:42:02 -0800
Subject: [PATCH 10/10] feat(astro): Add appearance option to Astro unstyled
 components (#5134)

---
 .../src/astro-components/unstyled/SignInButton.astro | 12 ++++++------
 .../astro-components/unstyled/SignOutButton.astro    |  2 +-
 .../src/astro-components/unstyled/SignUpButton.astro | 12 ++++++------
 packages/astro/src/types.ts                          |  1 -
 4 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/astro/src/astro-components/unstyled/SignInButton.astro b/packages/astro/src/astro-components/unstyled/SignInButton.astro
index 12b355b3eb0..ed95f51168b 100644
--- a/packages/astro/src/astro-components/unstyled/SignInButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignInButton.astro
@@ -1,10 +1,10 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import type { SignInProps } from '@clerk/types'
+import type { SignInButtonProps } from '@clerk/types'
 import type { ButtonProps } from '../../types';
 import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils'
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignInProps & ButtonProps<Tag>>
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & SignInButtonProps;
 
 import { generateSafeId } from '@clerk/astro/internal';
 
@@ -22,7 +22,7 @@ const {
   signUpFallbackRedirectUrl,
   signUpForceRedirectUrl,
   mode,
-  ...elementProps
+  ...props
 } = Astro.props
 
 const signInOptions = {
@@ -44,20 +44,20 @@ if (asChild) {
   asChild ? (
     <Fragment set:html={htmlElement} />
   ) : (
-    <Tag {...elementProps} data-clerk-unstyled-id={safeId}>
+    <Tag {...props} data-clerk-unstyled-id={safeId}>
       <slot>Sign in</slot>
     </Tag >
   )
 }
 
-<script is:inline define:vars={{ signInOptions, mode, safeId }}>
+<script is:inline define:vars={{ props, signInOptions, mode, safeId }}>
   const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
 
   btn.addEventListener("click", () => {
     const clerk = window.Clerk
 
     if (mode === 'modal') {
-      return clerk.openSignIn(signInOptions);
+      return clerk.openSignIn({ ...signInOptions, appearance: props.appearance });
     }
 
     return clerk.redirectToSignIn({
diff --git a/packages/astro/src/astro-components/unstyled/SignOutButton.astro b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
index e0a69a5661a..b855ed37fc3 100644
--- a/packages/astro/src/astro-components/unstyled/SignOutButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
@@ -4,7 +4,7 @@ import type { SignOutOptions, Without } from '@clerk/types'
 import type { ButtonProps } from '../../types';
 import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils'
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignOutOptions & Without<ButtonProps<Tag>, 'mode'>>
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignOutOptions & ButtonProps<Tag>>
 
 import { generateSafeId } from '@clerk/astro/internal'
 
diff --git a/packages/astro/src/astro-components/unstyled/SignUpButton.astro b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
index a88b65b817d..3576892b1b8 100644
--- a/packages/astro/src/astro-components/unstyled/SignUpButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
@@ -1,10 +1,10 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import type { SignUpProps } from '@clerk/types'
+import type { SignUpButtonProps } from '@clerk/types'
 import type { ButtonProps } from '../../types'
 import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils'
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignUpProps & ButtonProps<Tag>>
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & SignUpButtonProps;
 
 import { generateSafeId } from '@clerk/astro/internal';
 
@@ -23,7 +23,7 @@ const {
   signInForceRedirectUrl,
   mode,
   unsafeMetadata,
-  ...elementProps
+  ...props
 } = Astro.props
 
 const signUpOptions = {
@@ -46,20 +46,20 @@ if (asChild) {
   asChild ? (
     <Fragment set:html={htmlElement} />
   ) : (
-    <Tag {...elementProps} data-clerk-unstyled-id={safeId}>
+    <Tag {...props} data-clerk-unstyled-id={safeId}>
       <slot>Sign up</slot>
     </Tag >
   )
 }
 
-<script is:inline define:vars={{ signUpOptions, mode, safeId }}>
+<script is:inline define:vars={{ props, signUpOptions, mode, safeId }}>
   const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
 
   btn.addEventListener("click", () => {
     const clerk = window.Clerk
 
     if (mode === 'modal') {
-      return clerk.openSignUp(signUpOptions);
+      return clerk.openSignUp({ ...signUpOptions, appearance: props.appearance });
     }
 
     return clerk.redirectToSignUp({
diff --git a/packages/astro/src/types.ts b/packages/astro/src/types.ts
index bbc326975b5..49054017e2c 100644
--- a/packages/astro/src/types.ts
+++ b/packages/astro/src/types.ts
@@ -82,5 +82,4 @@ export type ButtonProps<Tag> = {
    */
   as: Tag;
   asChild?: boolean;
-  mode?: 'redirect' | 'modal';
 };