diff --git a/.changeset/chilled-parrots-pump.md b/.changeset/chilled-parrots-pump.md
new file mode 100644
index 00000000000..0698844a901
--- /dev/null
+++ b/.changeset/chilled-parrots-pump.md
@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+- Introduce organizationProfileProps as prop in ``.
+- Introduce appearance in userProfileProps in ``.
+- Deprecate the usage of `appearance.userProfile` in `.
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index 1da6ebc57a4..bbf9d9e9df9 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -52,6 +52,7 @@ export const OrganizationSwitcherPopover = React.forwardRef {
}
// The UserButton can also accept an appearance object for the nested UserProfile modal
- openUserProfile({ ...opts.userProfileProps, appearance: opts.appearance?.userProfile });
+ if (opts.appearance?.userProfile) {
+ deprecatedObjectProperty(
+ opts.appearance,
+ 'userProfile',
+ 'Use `` instead.',
+ );
+ }
+ openUserProfile({
+ appearance: opts.appearance?.userProfile,
+ // Prioritize the appearance of `userProfileProps`
+ ...opts.userProfileProps,
+ });
return opts.actionCompleteCallback?.();
};
diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
index bdfbc653045..2000815da37 100644
--- a/packages/types/src/clerk.ts
+++ b/packages/types/src/clerk.ts
@@ -795,13 +795,18 @@ export type UserButtonProps = {
* These options serve as overrides and will be merged with the global `appearance`
* prop of ClerkProvided (if one is provided)
*/
- appearance?: UserButtonTheme & { userProfile?: UserProfileTheme };
+ appearance?: UserButtonTheme & {
+ /**
+ * @deprecated Use `userProfileProps.appearance` instead.
+ */
+ userProfile?: UserProfileTheme;
+ };
/*
* Specify options for the underlying component.
* e.g.
*/
- userProfileProps?: Pick;
+ userProfileProps?: Pick;
};
type PrimitiveKeys = {
@@ -886,6 +891,12 @@ export type OrganizationSwitcherProps = {
* prop of ClerkProvided (if one is provided)
*/
appearance?: OrganizationSwitcherTheme;
+
+ /*
+ * Specify options for the underlying component.
+ * e.g.
+ */
+ organizationProfileProps?: Pick;
};
export type OrganizationListProps = {