ConnectButton

A wallet connection button with connector selection dropdown. Handles the full connect/disconnect lifecycle including loading states and error display.

import { ConnectButton } from '@web3marketlabs/react'
 
<ConnectButton />

Props

States

Idle (Disconnected)

Shows the label text (default: "Connect Wallet"). Clicking the button opens a dropdown listing all available wallet connectors (MetaMask, WalletConnect, etc.). If no wallets are detected, the dropdown displays “No wallets detected”.

Connecting

Shows “Connecting…” with a spinner animation while the wallet connection is in progress. The button is disabled during this state.

Connected

Shows the connected wallet address truncated in 0x1234...5678 format (first 6 characters + last 4 characters) alongside a disconnect button labeled with the disconnectLabel prop (default: "Disconnect").

Features

• Connector dropdown — Lists all available Wagmi connectors. Clicking a connector initiates the connection.
• Error display — If a connection attempt fails, the error message is shown below the button in a red alert box.
• Styled with inline defaults — Ships with sensible default styles. Customize by passing className or style props, which are merged with the defaults.
• Address truncation — Connected addresses are displayed as 0x + first 4 hex characters + ... + last 4 characters (e.g., 0x1a20...202c).

Examples

Default usage

import { ConnectButton } from '@web3marketlabs/react'
 
function Header() {
  return (
    <nav>
      <ConnectButton />
    </nav>
  )
}

Custom labels

<ConnectButton
  label="Sign In"
  disconnectLabel="Sign Out"
/>

With custom styling

<ConnectButton
  className="my-connect-btn"
  style={{ borderRadius: '9999px', padding: '12px 32px' }}
/>

Internal Behavior

• Uses Wagmi’s useAccount() for connection state and address
• Uses Wagmi’s useConnect() for connector listing and connection initiation
• Uses Wagmi’s useDisconnect() for disconnection
• The connector dropdown toggles on click and closes after a connector is selected

Source

export interface ConnectButtonProps {
  className?: string
  style?: CSSProperties
  label?: string
  disconnectLabel?: string
}

Defined in @web3marketlabs/react — src/components/ConnectButton.tsx.