diff --git a/.changeset/bright-dragons-join.md b/.changeset/bright-dragons-join.md
new file mode 100644
index 00000000000..a27b92f435f
--- /dev/null
+++ b/.changeset/bright-dragons-join.md
@@ -0,0 +1,35 @@
+---
+"@clerk/clerk-react": major
+---
+
+Replace the `signOutCallback` prop on the `` 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 (
+ { window.location.href = "/your-path" }}>
+
+
+ )
+}
+```
+
+After:
+
+```jsx
+import { SignOutButton } from "@clerk/clerk-react";
+
+export const Signout = () => {
+ return (
+
+
+
+ )
+}
+```
diff --git a/packages/react/src/components/SignOutButton.tsx b/packages/react/src/components/SignOutButton.tsx
index d82f1cbccd9..f3ed4e611a3 100644
--- a/packages/react/src/components/SignOutButton.tsx
+++ b/packages/react/src/components/SignOutButton.tsx
@@ -1,4 +1,4 @@
-import type { SignOutCallback, SignOutOptions } from '@clerk/types';
+import type { SignOutOptions } from '@clerk/types';
import React from 'react';
import type { WithClerkProp } from '../types';
@@ -6,20 +6,24 @@ import { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../ut
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>) => {
- 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 => {