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

# <LoginButton />

The `<LoginButton>` 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

<ParamField path="children" type="ReactNode" required={false}>
  A single child element to customize the button. Don't pass any handler even if it's a button.
</ParamField>

### Examples

#### Default usage

```tsx theme={null}
import { LoginButton, SignedOut } from "@kobbleio/next/client";

export default function MyComponent() {
    return (
        <SignedOut>
            <LoginButton />
        </SignedOut>
    );
}
```

#### Custom button

```tsx theme={null}
import { LoginButton, SignedOut } from "@kobbleio/next/client";

export default function MyComponent() {
    return (
        <SignedOut>
            <LoginButton>
                <button className={'your-class'}>
                    Login
                </button>
            </LoginButton>
        </SignedOut>
    );
}
```

<Note>The onClick event will automatically get handled by the SDK, don't pass any handler.</Note>