Docs

ConnectButton

ConnectButton component renders a <button> which when clicked opens a modal and allows users to connect to various wallets. It is extremely customizable and very easy to use.

Usage

  • Configure wallets in ThirdwebProvider

    To Configure which wallets to show in the ConnectButton Modal, configure the wallets prop in the ThirdwebProvider component which wraps your entire application.

    To display a Recommended tag below a wallet provider, pass in the recommended: true property in the wallet configurator function.

    import {
      ThirdwebProvider,
      metamaskConfig,
      coinbaseConfig,
      walletConnectConfig,
    } from "thirdweb-dev/react";
     
    function AppWithProviders() {
      return (
        <ThirdwebProvider
          client={client}
          wallets={[
            metamaskConfig({
              recommended: true,
            }),
            coinbaseConfig(),
            walletConnectConfig(),
          ]}
        >
          <App />
        </ThirdwebProvider>
      );
    }

    Supported Wallets

    If wallets is not configured in the ThirdwebProvider, the ConnectButton Modal shows the default wallets:

  • Configure ConnectButton

    Render the ConnectButton component anywhere in your application. Refer to Props to see the configuration options available

    import { ConnectButton } from "thirdweb/react";
     
    function Example() {
      return (
        <div>
          <ConnectButton />
        </div>
      );
    }

Props

ConnectButtonProps