feat(clerk-react): Replace signOutCallback with redirectUrl in SignOutButton

.changeset/bright-dragons-join.md

@@ -0,0 +1,35 @@
+---
+"@clerk/clerk-react": major
+---
+
+Replace the `signOutCallback` prop on the `<SignOutButton />` with `redirectUrl`. This aligns the API surface with other UI components provided by `@clerk/clerk-react`.
+
+If you previously used the `signOutCallback` prop to navigate to another page, you can migrate as shown below.
+
+Before:
+
+```jsx
+import { SignOutButton } from "@clerk/clerk-react";
+
+export const Signout = () => {
+  return (
+    <SignOutButton signOutCallback={() => { window.location.href = "/your-path" }}>
+      <button>Sign Out</button>
+    </SignOutButton>
+  )
+}
+```
+
+After:
+
+```jsx
+import { SignOutButton } from "@clerk/clerk-react";
+
+export const Signout = () => {
+  return (
+    <SignOutButton redirectUrl="/your-path">
+      <button>Sign Out</button>
+    </SignOutButton>
+  )
+}
+```

packages/react/src/components/SignOutButton.tsx

@@ -1,25 +1,29 @@
-import type { SignOutCallback, SignOutOptions } from '@clerk/types';
+import type { SignOutOptions } from '@clerk/types';
 import React from 'react';
 
 import type { WithClerkProp } from '../types';
 import { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';
 import { withClerk } from './withClerk';
 
 export type SignOutButtonProps = {
-  signOutCallback?: SignOutCallback;
+  redirectUrl?: string;
   signOutOptions?: SignOutOptions;
   children?: React.ReactNode;
 };
 
 export const SignOutButton = withClerk(
   ({ clerk, children, ...props }: React.PropsWithChildren<WithClerkProp<SignOutButtonProps>>) => {
-    const { signOutCallback, signOutOptions, ...rest } = props;
+    const { redirectUrl = '/', signOutOptions, ...rest } = props;
 
     children = normalizeWithDefaultValue(children, 'Sign out');
     const child = assertSingleChild(children)('SignOutButton');
 
+    const navigateToRedirectUrl = () => {
+      return clerk.navigate(redirectUrl);
+    };
+
     const clickHandler = () => {
-      return clerk.signOut(signOutCallback, signOutOptions);
+      return clerk.signOut(navigateToRedirectUrl, signOutOptions);
     };
 
     const wrappedChildClickHandler: React.MouseEventHandler = async e => {