> ## Documentation Index
> Fetch the complete documentation index at: https://thenile.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Sign Out

> Learn how to use the Nile Auth Sign Out component

## Overview

The `SignOutButton` component provides an interactive button for signing users out of your application. It supports optional redirect behavior, a custom callback URL, and configurable button text.

## Installation

```sh theme={null}
npm install @niledatabase/react @niledatabase/client
```

## Usage

> [tab] Preview
>
> [https://storybook.thenile.dev/iframe.html?globals=\&args=\&id=sign-out-button--sign-out-button](https://storybook.thenile.dev/iframe.html?globals=\&args=\&id=sign-out-button--sign-out-button)

> [tab] Component
>
> ```jsx theme={null}
> import { SignOutButton } from "@niledatabase/react";
>
> const MyComponent = () => {
> return <SignOutButton callbackUrl="/sign-in" buttonText="Logout" />;
> };
>
> ```

### `SignOutButton` Props

| Name | Type | Default | Description |
| - | - | - | - |
| `redirect` | `boolean` | `true` | Determines whether the user should be redirected after signing out. |
| `callbackUrl` | `string` | `window.location.href` | The URL to redirect to after signing out. |
| `buttonText` | `string` | `'Sign out'` | Custom text for the sign-out button. |

## Example with No Redirect

```tsx theme={null}
<SignOutButton redirect={false} buttonText="Log Out" />
```

## Internal Functionality

The `SignOutButton` component utilizes the `signOut` function to trigger a sign-out request.

```tsx theme={null}
signOut({ callbackUrl: '/sign-in' }); // Redirects user to the sign-in page
signOut({ redirect: false }); // Logs out without redirecting
```

### `signOut` Function

The `signOut` function makes a `POST` request to the sign-out endpoint, optionally taking:

* `callbackUrl`: A URL to redirect the user after logging out.
* `redirect`: A boolean indicating whether to reload the page post-logout.

## Theming

The `<SignOut />` component is styled using tailwind. It can be customized using the `className` and `buttonText` props,
or using Tailwind CSS theme variables. You can find more details and full examples in the [customization doc](https://thenile.dev/docs/auth/components/customization.md).

In addition, the hooks documented for each component can be used if you'd like to use Nile Auth with your own components.
If needed, you can peek at the [source code of the component](https://github.com/niledatabase/nile-js/tree/main/packages/react/src) and use it as a template to create your own component for maximum customization.

## Related Components

* [Sign In](https://thenile.dev/docs/auth/components/signin.md)
* [Sign Up](https://thenile.dev/docs/auth/components/signup.md)
* [User Profile](https://thenile.dev/docs/auth/components/user.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.