Customize ConnectButton

Learn how to customize Pay within the ConnectButton interface. You can find a selection of popular customizations below. For the full list of props, you can view the full reference.

---

You can enable users to select your token on a given chain by passing an array of SupportedTokens. Note that this array overrides all default tokens listed for that chain. Note that this will also show these tokens in the 'Send' screen to transfer tokens.

<ConnectButton
  client={client}
  supportedTokens={{
    "1": [
      {
        address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
        name: "USD Coin",
        symbol: "USDC",
        icon: usdcIcon,
      },
    ],
  }}
/>;

---

In the case you want your users to purchase your token by default in your application, you can choose to pre-fill the Pay purchase flow with prefillBuy .

For example, if you wanted users to only purchase Ethereum on Base network, you could do as follows:

import { base } from "thirdweb/chains";
 
<ConnectButton
  client={client}
  detailsModal={{
    payOptions: {
      prefillBuy: {
        token: {
          address: "0x866a087038f7C12cf33EF91aC5b1AcE6Ac1DA788",
          name: "Base ETH",
          symbol: "ETH",
          icon: "...", // optional
        },
        chain: base,
        allowEdits: {
          amount: true, // allow editing buy amount
          token: false, // disable selecting buy token
          chain: false, // disable selecting buy chain
        },
      },
    },
  }}
/>;

If you'd like to prefill a purchase with a native token, you can set the chain without passing a token:

<ConnectButton
  client={client}
  detailsModal={{
    payOptions: {
      prefillBuy: {
        chain: base,
      },
    },
  }}
/>;

---

In some cases, you may only want to show users fiat or crypto payment options for your onchain goods or services. You can do this by setting either buyWithCrypto or buyWithFiat to false.

<ConnectButton
  client={client}
  detailsModal={{
    payOptions: {
      buyWithCrypto: false,
    },
  }}
/>;

<ConnectButton
  client={client}
  detailsModal={{
    payOptions: {
      buyWithFiat: false,
    },
  }}
/>;

---

You can set the theme for the Pay component, which is set to "dark" by default. theme can be set to either "dark" , "light" or a custom theme object.

We have lightTheme or darkTheme providers that you can override to kickstart customization.

You can refer to our Theme page for a full view of customizable options if you’d prefer to create a custom theme from scratch.

<ConnectButton theme='light' />
 
<ConnectButton theme='dark' />

import { darkTheme } from 'thirdweb/react';
 
// Using custom theme
<ConnectButton theme={darkTheme({ ... })} />