Connect Wallet Button

Button to connect a user’s wallet to your app, with support for MetaMask, Coinbase, and WalletConnect.

Wallets you provide to the ThirdwebProvider's walletConnectors prop are shown as options in the button’s dropdown menu (if not configured, the default three options are shown).

import { ConnectWallet } from "@thirdweb-dev/react";

Usage

Render the ConnectWallet component to display the button.

import { ConnectWallet } from "@thirdweb-dev/react";

function App() {
  return <ConnectWallet />;
}

Live Demo

Edit the code below to see how it works!

Note: this playground uses the Goerli test network.

Editor

<ConnectWallet 
  accentColor="#fff"
  colorMode="dark"
  btnTitle="Connect Wallet"
/>

Preview

Configuration

accentColor (optional)

The background color of the button.

Can be a color in the form of a hex code, a CSS color name, transparent, or initial.

The default value is #000000.

import { ConnectWallet } from "@thirdweb-dev/react";

function App() {
  return (
    <ConnectWallet
      accentColor="pink"
    />
  );
}

colorMode (optional)

Change the color scheme of the button to light or dark mode, to match the color scheme of your app.

The default value is dark.

import { ConnectWallet } from "@thirdweb-dev/react";

function App() {
  return (
    <ConnectWallet
      colorMode="light"
    />
  );
}

btnTitle (optional)

Change the text the button displays while in the disconnected state.

The default value is Connect Wallet.

import { ConnectWallet } from "@thirdweb-dev/react";

function App() {
  return (
    <ConnectWallet
      btnTitle="Connect Wallet"
    />
  );
}

auth (optional)

Enforce that users must sign in with their wallet using auth after connecting their wallet.

Requires the authConfig prop to be set on the ThirdWebProvider component.

import { ConnectWallet } from "@thirdweb-dev/react";

function App() {
  return (
    <ConnectWallet
      colorMode="light"
      auth={{
        loginOptional: false,
      }}
    />
  );
}

className (optional)

Apply custom CSS styles to the button.

info

For some specific CSS attributes such as width you may need to apply the !important CSS rule to override the default styles of the button.

import { ConnectWallet } from "@thirdweb-dev/react";

function App() {
  return (
    <ConnectWallet
      className="my-custom-class"
    />
  );
}