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

# ConnectWalletButton

> A ready-to-use button that handles connection states and account truncation.

The `ConnectWalletButton` is a drop-in component that manages the entire wallet connection flow. It automatically toggles between a "Connect" state and a "Connected" state based on the user's session.

#### Key Features

* Automatic Truncation: Long Stellar addresses are shortened (e.g., `GABCDE...STUV`) to fit perfectly in your navigation bar.
* State Awareness: The button knows when to show the connection modal and when to trigger a logout.
* Headless Styling: While it comes with clean defaults, it is designed to be restyled via simple CSS variables.
* Zero Logic Required: You do not need to manually check `isConnected` or handle click events.

#### Basic Usage

```tsx theme={null}
import { ConnectWalletButton } from "@sorokit/wallet-adapter";

function Header() {
  return (
    <nav>
      <h1>My dApp</h1>
      <ConnectWalletButton />
    </nav>
  );
}
```

#### Customization via Props

The component accepts a few simple props for basic labeling and layout:

* `connectLabel`: Change the text shown when no wallet is linked (defaults to "Connect Wallet").
* `className`: Pass your own Tailwind classes or standard CSS classes to adjust position or margins.

```tsx theme={null}
<ConnectWalletButton connectLabel="Sign In" className="my-4" />
```

#### Advanced Theming

To make the button match your brand perfectly, use the built-in CSS custom properties. This is more efficient than overriding complex class hierarchies.

Add these to your global CSS file:

```css theme={null}
:root {
  --sorokit-button-bg: #101010;
  --sorokit-button-fg: #ffffff;
  --sorokit-button-radius: 9999px;
  --sorokit-button-padding: 0.5rem 1.5rem;
  --sorokit-button-border: 1px solid #303030;
  --sorokit-button-font-weight: 500;
}
```

#### Why use this over a custom button

* Consistency: It uses the exact same `connect` and `disconnect` logic as the rest of the Sorokit suite.
* Safety: It handles the edge cases of wallet rejections and network mismatches internally.
* Speed: You can go from a blank page to a fully functioning wallet connection UI in one line of code.

#### Properties Reference

* `className`: string (Optional). Applied to the underlying HTML button element.
* `connectLabel`: string (Optional). The text displayed during the IDLE state.