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

# Connect button

> Default ConnectButton and ConnectButton.Custom render-prop for host-owned connect UI.

`ConnectButton` must render inside `WalletProviders` (or `DZapWidgetProvider`, which mounts it).

## Default

The default export opens the wallet modal. Use it as a "connect another wallet" control, or replace it with the custom render-prop.

```tsx theme={null}
import { ConnectButton } from '@dzapio/wallet';

<ConnectButton />
```

## Custom

`ConnectButton.Custom` gives you account state and modal openers. Style the trigger however you want; the package still owns the connect and account dialogs.

```tsx theme={null}
import { ConnectButton } from '@dzapio/wallet';

<ConnectButton.Custom>
  {({ account, accounts, openConnectModal, openAccountModal }) => {
    const isConnected = Boolean(account?.address && account.isConnected);
    return (
      <button onClick={isConnected ? openAccountModal : openConnectModal}>
        {isConnected ? (account.ensName ?? account.address) : 'Connect Wallet'}
      </button>
    );
  }}
</ConnectButton.Custom>
```

| Render-prop field  | Description                                        |
| ------------------ | -------------------------------------------------- |
| `account`          | Active account (see [Hooks](/widget/wallet/hooks)) |
| `accounts`         | All connected accounts across ecosystems           |
| `openConnectModal` | Open the wallet picker                             |
| `openAccountModal` | Open the connected-account dialog                  |

From `@dzapio/widget`, the equivalent styled control is `ConnectWalletButton`.