# Logout Button

Canonical page: https://docs.ovok.com/native-sdk/guide/components/auth/logout-button

`LogoutButton` is a ready-made sign-out action for account settings. It calls
`client.auth.logout()` on the active native `Ovok` client, signs out of Google when needed, and
notifies mounted auth hooks to refresh. Your app owns navigation and any
unsaved-work confirmation.

## Add the button [#add-the-button]

```tsx
import { LogoutButton } from "@ovok/native";
import { Alert } from "react-native";

export function AccountActions() {
  return (
    <LogoutButton
      variant="button"
      title="Sign out"
      onError={() =>
        Alert.alert("Couldn't sign out", "Check your connection and try again.")
      }
    />
  );
}
```

Render the button below [`OvokProvider`](/native-sdk/guide/how-to/app-shell). The default
variant is `"row"`, which renders a settings-list row. Use `variant="button"`
for a full-width React Native Paper button. The button variant accepts a
custom `Button` component; both variants accept inherited settings-row props
such as `disabled`, `style`, and `testID`.

## Handle request outcomes [#handle-request-outcomes]

`onPress` runs when the user presses the action and before the logout request.
`onError` receives a request error. There is a callback behavior to account for
in the current implementation: `onSuccess` runs in the `finally` path, so it
also runs after `onError`. Do not use it as proof that the server accepted the
logout. For success-dependent navigation, track the request outcome in
app-owned code or use an auth-state gate.

The control prevents duplicate logout requests while busy. Use its `loading`
and `disabled` props to coordinate it with the rest of the settings screen.

## Related guides [#related-guides]

- [Session management](/native-sdk/guide/components/auth/session/) for custom session controls
- [Delete account](/native-sdk/guide/components/auth/delete-account-button/) for account deletion