║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: '<SignOutButton>' description: The <SignOutButton> component is a button that signs a user out. sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue

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

<If sdk="nextjs"> ```jsx {{ filename: 'app/page.tsx' }} import { SignOutButton } from '@clerk/nextjs'

export default function Home() { return <SignOutButton /> }

</If>

<If sdk="react">
```jsx {{ filename: 'src/App.tsx' }}
import { SignOutButton } from '@clerk/clerk-react'

function App() {
  return <SignOutButton />
}

export default App

</If> <If sdk="astro"> ```astro {{ filename: 'pages/sign-out.astro' }} --- import { SignOutButton } from '@clerk/astro/components' --- <SignOutButton /> ``` </If> <If sdk="expo"> <Include src="_partials/expo/web-only-callout" />

import { SignOutButton } from '@clerk/clerk-expo/web'

export default function SignOutPage() {
  return <SignOutButton />
}

</If> <If sdk="chrome-extension"> ```jsx {{ filename: 'src/routes/sign-out.tsx' }} import { SignOutButton } from '@clerk/chrome-extension'

export default function SignOutPage() { return <SignOutButton /> }

</If>

<If sdk="remix">
```tsx {{ filename: 'app/routes/_index.tsx' }}
import { SignOutButton } from '@clerk/remix'

export default function Home() {
  return <SignOutButton />
}

</If> <If sdk="react-router"> ```tsx {{ filename: 'app/routes/home.tsx' }} import { SignOutButton } from '@clerk/react-router'

export default function Home() { return <SignOutButton /> }

</If>

<If sdk="tanstack-react-start">
```tsx {{ filename: 'app/routes/sign-out.tsx' }}
import { SignOutButton } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/sign-out')({
  component: SignOut,
})

function SignOut() {
  return <SignOutButton />
}

</If> <If sdk="nuxt"> ```vue {{ filename: 'pages/sign-out.vue' }} <script setup> // Components are automatically imported </script> <template> <SignOutButton /> </template> ``` </If> <If sdk="vue"> ```vue {{ filename: 'sign-out.vue' }} <script setup> import { SignOutButton } from '@clerk/vue' </script> <template> <SignOutButton /> </template> ``` </If>

Custom usage

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

<If sdk="nextjs"> ```jsx {{ filename: 'app/page.js' }} import { SignOutButton } from '@clerk/nextjs'

export default function Home() { return ( <SignOutButton> <button>Custom sign out button</button> </SignOutButton> ) }

</If>

<If sdk="react">
```jsx {{ filename: 'src/App.tsx' }}
import { SignOutButton } from '@clerk/clerk-react'

function App() {
  return (
    <SignOutButton>
      <button>Custom sign out button</button>
    </SignOutButton>
  )
}

export default App

</If> <If sdk="astro"> You must pass the `asChild` prop to the `<SignOutButton>` component if you are passing children to it.

---
import { SignOutButton } from '@clerk/astro/components'
---

<SignOutButton asChild>
  <button>Custom sign out button</button>
</SignOutButton>

</If> <If sdk="expo"> <Include src="_partials/expo/web-only-callout" />

import { SignOutButton } from '@clerk/clerk-expo/web'

export default function Home() {
  return (
    <SignOutButton>
      <button>Custom sign out button</button>
    </SignOutButton>
  )
}

</If> <If sdk="chrome-extension"> ```jsx {{ filename: 'src/routes/home.tsx' }} import { SignOutButton } from '@clerk/chrome-extension'

export default function Home() { return ( <SignOutButton> <button>Custom sign out button</button> </SignOutButton> ) }

</If>

<If sdk="remix">
```tsx {{ filename: 'app/routes/_index.tsx' }}
import { SignOutButton } from '@clerk/remix'

export default function Home() {
  return (
    <SignOutButton>
      <button>Custom sign out button</button>
    </SignOutButton>
  )
}

</If> <If sdk="react-router"> ```tsx {{ filename: 'app/routes/home.tsx' }} import { SignOutButton } from '@clerk/react-router'

export default function Home() { return ( <SignOutButton> <button>Custom sign out button</button> </SignOutButton> ) }

</If>

<If sdk="nuxt">
```vue {{ filename: 'pages/index.vue' }}
<script setup>
// Components are automatically imported
</script>

<template>
  <SignOutButton>
    <button>Custom sign out button</button>
  </SignOutButton>
</template>

</If> <If sdk="vue"> ```vue {{ filename: 'example.vue' }} <script setup> import { SignOutButton } from '@clerk/vue' </script> <template> <SignOutButton> <button>Custom sign out button</button> </SignOutButton> </template> ``` </If> <If sdk="tanstack-react-start"> ```tsx {{ filename: 'app/routes/index.tsx' }} import { SignOutButton } from '@clerk/tanstack-react-start' import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({ component: Home, })

function Home() { return ( <SignOutButton> <button>Custom sign out button</button> </SignOutButton> ) }

</If>

### Multi-session usage

#### Sign out of all sessions

Clicking the `<SignOutButton>` component signs the user out of all sessions. This is the default behavior.

#### Sign out of a specific session

You can sign out of a specific session by passing in a `sessionId` to the `sessionId` prop. This is useful for signing a single account out of a [multi-session application](/docs/guides/secure/session-options#multi-session-applications).

In the following example, the `sessionId` is retrieved from the [`useAuth()`](/docs/reference/hooks/use-auth) hook. If the user is not signed in, the `sessionId` will be `null`, and the user is shown the [`<SignInButton>`](/docs/reference/components/unstyled/sign-in-button) component. If the user is signed in, the user is shown the `<SignOutButton>` component, which when clicked, signs the user out of that specific session.

<If sdk="nextjs">
```tsx {{ filename: 'app/page.tsx' }}
'use client'

import { SignInButton, SignOutButton, useAuth } from '@clerk/nextjs'

export default function Home() {
  const { sessionId } = useAuth()

  if (!sessionId) {
    return <SignInButton />
  }

  return <SignOutButton sessionId={sessionId} />
}

</If> <If sdk="react"> ```jsx {{ filename: 'src/App.tsx' }} import { SignInButton, SignOutButton, useAuth } from '@clerk/clerk-react'

function App() { const { sessionId } = useAuth()

if (!sessionId) {
  return <SignInButton />
}

return <SignOutButton sessionId={sessionId} />

}

export default App

</If>

<If sdk="remix">
```tsx {{ filename: 'app/routes/_index.tsx' }}
import { SignInButton, SignOutButton, useAuth } from '@clerk/remix'

export default function Home() {
  const { sessionId } = useAuth()

  if (!sessionId) {
    return <SignInButton />
  }

  return <SignOutButton sessionId={sessionId} />
}

</If> <If sdk="react-router"> ```tsx {{ filename: 'app/routes/home.tsx' }} import { SignInButton, SignOutButton, useAuth } from '@clerk/react-router'

export default function Home() { const { sessionId } = useAuth()

if (!sessionId) {
  return <SignInButton />
}

return <SignOutButton sessionId={sessionId} />

}

</If>

<If sdk="chrome-extension">
```jsx {{ filename: 'src/routes/home.tsx' }}
import { SignInButton, SignOutButton, useAuth } from '@clerk/chrome-extension'

export default function Home() {
  const { sessionId } = useAuth()

  if (!sessionId) {
    return <SignInButton />
  }

  return <SignOutButton sessionId={sessionId} />
}

</If> <If sdk="nuxt"> ```vue {{ filename: 'pages/index.vue' }} <script setup> // Components are automatically imported // Composables are automatically imported const { sessionId } = useAuth() </script> <template> <SignInButton v-if="!sessionId" /> <SignOutButton v-else :session-id="sessionId" /> </template> ``` </If> <If sdk="vue"> ```vue {{ filename: 'example.vue' }} <script setup> import { SignInButton, SignOutButton, useAuth } from '@clerk/vue'

const { sessionId } = useAuth() </script>

<template> <SignInButton v-if="!sessionId" /> <SignOutButton v-else :session-id="sessionId" /> </template> ``` </If> <If sdk="astro"> ```astro {{ filename: 'pages/index.astro' }} --- import { SignInButton, SignOutButton } from '@clerk/astro/components' import { useAuth } from '@clerk/astro/react' const { sessionId } = useAuth() ---

{sessionId ? <SignOutButton sessionId={sessionId} /> : <SignInButton />}

</If>

<If sdk="expo">
<Include src="_partials/expo/web-only-callout" />

```jsx {{ filename: '/app/index.web.tsx' }}
import { SignInButton, SignOutButton, useAuth } from '@clerk/clerk-expo/web'

export default function Home() {
  const { sessionId } = useAuth()

  if (!sessionId) {
    return <SignInButton />
  }

  return <SignOutButton sessionId={sessionId} />
}

</If> <If sdk="tanstack-react-start"> ```tsx {{ filename: 'app/routes/index.tsx' }} import { SignInButton, SignOutButton, useAuth } from '@clerk/tanstack-react-start' import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({ component: Home, })

function Home() { const { sessionId } = useAuth()

if (!sessionId) {
  return <SignInButton />
}

return <SignOutButton sessionId={sessionId} />

}

</If>

## Properties

<Properties>
- `redirectUrl?`
- `string`

The full URL or path to navigate after successful sign-out.

---

- `sessionId?`
- `string`

The ID of a specific session to sign out of. Useful for [multi-session applications](/docs/guides/secure/session-options#multi-session-applications).

---

- `children?`
- `React.ReactNode`

Children you want to wrap the `<SignOutButton>` in.
</Properties>

<If sdk="astro">
<Properties>
  - `asChild?`
  - `boolean`

  If `true`, the `<SignOutButton>` component will render its children as a child of the component.
</Properties>
</If>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║