<SignOutButton/>

Show a button that can be used to sign out the user.

<SignOutButton/> is a button that will sign a user out. By default, it is a <button> tag that says Sign Out, but it is completely customizable by passing children.

Basic Usage

1
import { SignOutButton } from "@clerk/nextjs";
2

3
  export default function Home() {
4
    return (
5
      <div>
6
      <h1> Sign Out </h1>
7
        <SignOutButton/>
8
      </div>
9
    );
10
  }

Custom Usage

You can create a custom button by wrapping your button in the <SignOutButton/>

1
import { SignOutButton } from "@clerk/nextjs";
2

3
  export default function Home() {
4
    return (
5
      <div>
6
      <h1> Sign Out </h1>
7
        <SignOutButton>
8
        <button>Sign in with Clerk</button>
9
        </SignOutButton>
10
      </div>
11
    );
12
  }

Props

Name	Type	Description
signOutCallback?	() => void \| Promise<any>;	A promise to handle after the sign out has successfully happened.
children?	React.ReactNode	children you want to wrap the sign out button in.
signOutOptions?	SignOutOptions	Object that current has a `sessionId` property. The sessionId can be passed in to sign out a specific session, which is useful for multisession applications.