`<SignOutButton />`

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

Usage

Basic Usage

app/page.js
import { SignOutButton } from "@clerk/nextjs";
 
export default function Home() {
  return (
    <div>
    <h1> Sign out </h1>
      <SignOutButton />
    </div>
  );
}

pages/index.js
import { SignOutButton } from "@clerk/nextjs";
 
export default function Home() {
  return (
    <div>
    <h1> Sign out </h1>
      <SignOutButton />
    </div>
  );
}

example.js
import { SignOutButton } from "@clerk/clerk-react";
 
export default function Example() {
  return (
    <div>
    <h1> Sign out </h1>
      <SignOutButton />
    </div>
  );
}

pages/index.js
import { SignOutButton } from "@clerk/remix";
 
export default function Home() {
  return (
    <div>
    <h1> Sign out </h1>
      <SignOutButton />
    </div>
  );
}

pages/index.js
import { SignOutButton } from "gatsby-plugin-clerk";
 
export default function Home() {
  return (
    <div>
    <h1> Sign out </h1>
      <SignOutButton />
    </div>
  );
}

Custom Usage

You can create a custom button by wrapping your own button, or button text, in the <SignOutButton /> component.

app/page.js
import { SignOutButton } from "@clerk/nextjs";
 
export default function Home() {
  return (
    <div>
    <h1> Sign out </h1>
      <SignOutButton>
        <button>Sign in with Clerk</button>
      </SignOutButton>
    </div>
  );
}

pages/index.js
import { SignOutButton } from "@clerk/nextjs";
 
export default function Home() {
  return (
    <div>
    <h1> Sign out </h1>
      <SignOutButton>
        <button>Sign in with Clerk</button>
      </SignOutButton>
    </div>
  );
}

example.js
import { SignOutButton } from "@clerk/clerk-react";
 
export default function Example() {
  return (
    <div>
    <h1> Sign out </h1>
      <SignOutButton>
        <button>Sign in with Clerk</button>
      </SignOutButton>
    </div>
  );
}

pages/index.js
import { SignOutButton } from "@clerk/remix";
 
export default function Home() {
  return (
    <div>
    <h1> Sign in </h1>
      <SignOutButton>
        <button>Sign in with Clerk</button>
      </SignOutButton>
    </div>
  );
}

pages/index.js
import { SignOutButton } from "gatsby-plugin-clerk";
 
export default function Home() {
  return (
    <div>
    <h1> Sign out </h1>
      <SignOutButton>
        <button>Sign in with Clerk</button>
      </SignOutButton>
    </div>
  );
}

Properties

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 `<SignOutButton />` in.
`signOutOptions?`	`SignOutOptions`	Object that has a `sessionId` property. The `sessionId` can be passed in to sign out a specific session, which is useful for multisession applications.