From 732fd7ec5764c39cb1f8ca8c18a5a9c67a588d17 Mon Sep 17 00:00:00 2001
From: Jacek <jacek@clerk.dev>
Date: Fri, 20 Mar 2026 21:13:21 -0500
Subject: [PATCH 1/4] fix(react): deprecate SignOutButton signOutOptions prop
 in favor of flat props

---
 .../react/src/components/SignOutButton.tsx    | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/SignOutButton.tsx b/packages/react/src/components/SignOutButton.tsx
index 70951ab6e4e..e8fd9143ba9 100644
--- a/packages/react/src/components/SignOutButton.tsx
+++ b/packages/react/src/components/SignOutButton.tsx
@@ -1,3 +1,4 @@
+import { deprecated } from '@clerk/shared/deprecated';
 import type { SignOutOptions } from '@clerk/shared/types';
 import React from 'react';
 
@@ -7,18 +8,34 @@ import { withClerk } from './withClerk';
 
 export type SignOutButtonProps = {
   redirectUrl?: string;
+  sessionId?: string;
+  /**
+   * @deprecated Use the `redirectUrl` and `sessionId` props directly instead.
+   */
   signOutOptions?: SignOutOptions;
   children?: React.ReactNode;
 };
 
 export const SignOutButton = withClerk(
   ({ clerk, children, ...props }: React.PropsWithChildren<WithClerkProp<SignOutButtonProps>>) => {
-    const { redirectUrl = '/', signOutOptions, getContainer, component, ...rest } = props;
+    const { redirectUrl = '/', sessionId, signOutOptions, getContainer, component, ...rest } = props;
+
+    if (signOutOptions) {
+      deprecated(
+        'SignOutButton `signOutOptions`',
+        'Use the `redirectUrl` and `sessionId` props directly instead.',
+      );
+    }
 
     children = normalizeWithDefaultValue(children, 'Sign out');
     const child = assertSingleChild(children)('SignOutButton');
 
-    const clickHandler = () => clerk.signOut({ redirectUrl, ...signOutOptions });
+    const clickHandler = () =>
+      clerk.signOut({
+        redirectUrl,
+        ...(sessionId !== undefined && { sessionId }),
+        ...signOutOptions,
+      });
     const wrappedChildClickHandler: React.MouseEventHandler = async e => {
       await safeExecute((child as any).props.onClick)(e);
       return clickHandler();

From 1f6c59b3d5433d2d4c004f5bc5741b1d8d2b85f2 Mon Sep 17 00:00:00 2001
From: Jacek <jacek@clerk.dev>
Date: Fri, 20 Mar 2026 21:24:53 -0500
Subject: [PATCH 2/4] test(react): add tests for SignOutButton flat sessionId
 prop

---
 .../src/components/__tests__/SignOutButton.test.tsx  | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/react/src/components/__tests__/SignOutButton.test.tsx b/packages/react/src/components/__tests__/SignOutButton.test.tsx
index 2d3813ee62c..914189e27c3 100644
--- a/packages/react/src/components/__tests__/SignOutButton.test.tsx
+++ b/packages/react/src/components/__tests__/SignOutButton.test.tsx
@@ -58,6 +58,18 @@ describe('<SignOutButton />', () => {
     });
   });
 
+  it('handles sessionId prop', async () => {
+    render(<SignOutButton sessionId='sess_1yDceUR8SIKtQ0gIOO8fNsW7nhe' />);
+    const btn = screen.getByText('Sign out');
+    await userEvent.click(btn);
+    await waitFor(() => {
+      expect(mockSignOut).toHaveBeenCalledWith({
+        redirectUrl: '/',
+        sessionId: 'sess_1yDceUR8SIKtQ0gIOO8fNsW7nhe',
+      });
+    });
+  });
+
   it('handles signOutOptions prop', async () => {
     render(<SignOutButton signOutOptions={{ redirectUrl: url, sessionId: 'sess_1yDceUR8SIKtQ0gIOO8fNsW7nhe' }} />);
     const btn = screen.getByText('Sign out');

From ac2a3493b967c0a464c2863d75f193011c0178e0 Mon Sep 17 00:00:00 2001
From: Jacek <jacek@clerk.dev>
Date: Fri, 20 Mar 2026 21:26:52 -0500
Subject: [PATCH 3/4] chore(repo): add changeset for SignOutButton
 signOutOptions deprecation

---
 .changeset/deprecate-signout-options.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/deprecate-signout-options.md

diff --git a/.changeset/deprecate-signout-options.md b/.changeset/deprecate-signout-options.md
new file mode 100644
index 00000000000..c7f7a6fecd6
--- /dev/null
+++ b/.changeset/deprecate-signout-options.md
@@ -0,0 +1,5 @@
+---
+"@clerk/react": patch
+---
+
+Deprecate the `signOutOptions` prop on `<SignOutButton />` in favor of top-level `redirectUrl` and `sessionId` props. The `signOutOptions` prop still works but now emits a deprecation warning.

From 99d8b9b63a1d21f52079f87320c72538a449a187 Mon Sep 17 00:00:00 2001
From: Jacek <jacek@clerk.dev>
Date: Fri, 20 Mar 2026 22:18:46 -0500
Subject: [PATCH 4/4] fix(react): format SignOutButton with prettier

---
 packages/react/src/components/SignOutButton.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/react/src/components/SignOutButton.tsx b/packages/react/src/components/SignOutButton.tsx
index e8fd9143ba9..5212e61636b 100644
--- a/packages/react/src/components/SignOutButton.tsx
+++ b/packages/react/src/components/SignOutButton.tsx
@@ -21,10 +21,7 @@ export const SignOutButton = withClerk(
     const { redirectUrl = '/', sessionId, signOutOptions, getContainer, component, ...rest } = props;
 
     if (signOutOptions) {
-      deprecated(
-        'SignOutButton `signOutOptions`',
-        'Use the `redirectUrl` and `sessionId` props directly instead.',
-      );
+      deprecated('SignOutButton `signOutOptions`', 'Use the `redirectUrl` and `sessionId` props directly instead.');
     }
 
     children = normalizeWithDefaultValue(children, 'Sign out');