The <LogoutButton> component allows you to show a button that triggers the login flow and redirects the user to your authentication portal.

You can use the component as it or pass it a child to customize it.

​
Props

children
ReactNode

A single child element to customize the button. Don’t pass any handler even if it’s a button.

​
Examples

​
Default usage

import { LogoutButton, SignedOut } from "@kobbleio/next/client";

<SignedOut>
    <LogoutButton />
</SignedOut>

​
Custom button

import { LogoutButton, SignedOut } from "@kobbleio/next/client";

export default function CustomLogoutButton() {
    return (
        <SignedOut>
            <LogoutButton>
                <button className={'custom-class'}>Sign out</button>
            </LogoutButton>
        </SignedOut>
    );
}
The onClick event will automatically get handled by the SDK, don’t pass any handler.
<LoginButton /><PricingLink />