diff --git a/.changeset/few-news-impress.md b/.changeset/few-news-impress.md
new file mode 100644
index 00000000000..92c9bc503ac
--- /dev/null
+++ b/.changeset/few-news-impress.md
@@ -0,0 +1,7 @@
+---
+'@clerk/astro': patch
+'@clerk/clerk-react': patch
+'@clerk/vue': patch
+---
+
+Add the ability to specify an appearance for modal component usages.
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.
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/react/SignInButton.tsx b/packages/astro/src/react/SignInButton.tsx
index d519108efc0..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);
-    }
-    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 b37651e5609..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);
-    }
-
-    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/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/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';
 };
diff --git a/packages/react/src/components/SignInButton.tsx b/packages/react/src/components/SignInButton.tsx
index a18ba92e57c..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,
@@ -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..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,
@@ -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..97f03064cab 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -7,9 +7,7 @@ import type {
   LoadedClerk,
   MultiDomainAndOrProxy,
   RedirectUrlProp,
-  SignInProps,
   SignInRedirectOptions,
-  SignUpProps,
   SignUpRedirectOptions,
   Without,
 } from '@clerk/types';
@@ -109,35 +107,10 @@ export type ClerkProp =
   | undefined
   | null;
 
-type ButtonProps = {
+export type SignInWithMetamaskButtonProps = {
   mode?: 'redirect' | 'modal';
   children?: React.ReactNode;
-};
-
-export type SignInButtonProps = ButtonProps &
-  Pick<
-    SignInProps,
-    | 'fallbackRedirectUrl'
-    | 'forceRedirectUrl'
-    | 'signUpForceRedirectUrl'
-    | 'signUpFallbackRedirectUrl'
-    | 'initialValues'
-    | 'withSignUp'
-  >;
-
-export type SignUpButtonProps = {
-  unsafeMetadata?: SignUpUnsafeMetadata;
-} & ButtonProps &
-  Pick<
-    SignUpProps,
-    | 'fallbackRedirectUrl'
-    | 'forceRedirectUrl'
-    | 'signInForceRedirectUrl'
-    | 'signInFallbackRedirectUrl'
-    | 'initialValues'
-  >;
-
-export type SignInWithMetamaskButtonProps = ButtonProps & RedirectUrlProp;
+} & RedirectUrlProp;
 
 export type RedirectToSignInProps = SignInRedirectOptions;
 export type RedirectToSignUpProps = SignUpRedirectOptions;
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({