Customization Options

Our ConnectButton and ConnectEmbed components are highly customizable. You can find a selection of popular customizations below. For the full list of props, you can view the full reference.

You can customize the logo shown on the Connect modal by adding it to the appMetadata prop:

import { ConnectButton } from "thirdweb/react";
 
function Example() {
  return (
    <div>
      <ConnectButton
        appMetadata={{
          logoUrl: "https://path/to/my-app/logo.svg",
        }}
      />
    </div>
  );
}

---

The Connect modal is set to "wide" by default. You can set it to "compact" by adding it to the connectModal prop:

import { ConnectButton } from "thirdweb/react";
 
function Example() {
  return (
    <div>
      <ConnectButton connectModal={{ size: "compact" }} />
    </div>
  );
}

---

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

We have [lightTheme](https://portal.thirdweb.com/references/typescript/v5/lightTheme) or [darkTheme](https://portal.thirdweb.com/references/typescript/v5/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.

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

---

By default, our ConnectButton uses the en-US locale. You can customize the language by setting the locale prop. You can refer to the [LocaleId](https://portal.thirdweb.com/references/typescript/v5/LocaleId) type for supported locales.

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

thirdweb currently supports the following locales:

"en_US" | "es_ES" | "ja_JP" | "tl_PH";