Function: KeaConnectButton()

function KeaConnectButton(): Element;

Defined in: KeaConnectButton.tsx:78

Pre-built connect / disconnect button for KEA Wallet.

The component renders one of three visual states:

1. Disconnected — a "Connect Wallet" button that calls connect() on click.
2. Connecting — a disabled "Connecting…" button shown while the wallet handshake is in progress.
3. Connected — displays the truncated wallet address (e.g. 0x12…cdef). Clicking the button calls disconnect().

Returns

Element

Remarks

Context requirement — must be rendered inside a KeaProvider. The component calls the useWallet hook internally to manage connection state.

Styling — ships with dark-themed inline styles. The styles are not customisable via CSS classes. For a fully custom connect button, use the useWallet hook directly with your own markup.

Address format — connected addresses are truncated to the first 4 and last 4 characters (e.g. 0x1234…abcd).

Examples

Basic usage:

import { KeaProvider } from '@kea-wallet/react-sdk';
import { KeaConnectButton } from '@kea-wallet/react-ui';

function App() {
  return (
    <KeaProvider config={{ rpcUrl: 'https://grpc-web.alphanet.thruput.org' }}>
      <KeaConnectButton />
    </KeaProvider>
  );
}

Alongside KeaAccountSwitcher in a toolbar:

import { KeaConnectButton, KeaAccountSwitcher } from '@kea-wallet/react-ui';

function Toolbar() {
  return (
    <header style={{ display: 'flex', gap: 8 }}>
      <KeaAccountSwitcher />
      <KeaConnectButton />
    </header>
  );
}

Next.js — dynamic import to avoid SSR hydration issues:

import dynamic from 'next/dynamic';

const KeaConnectButton = dynamic(
  () => import('@kea-wallet/react-ui').then((m) => m.KeaConnectButton),
  { ssr: false },
);

See

• KeaAccountSwitcher — alternative component with multi-account dropdown.
• useWallet — underlying hook for custom connect UI.
• KeaProvider — required context provider.