Custom ConnectButton

Creating a custom ConnectButton

You can use the low-level ConnectButton.Custom to create your own custom connection button. This component renders a function, which includes everything you need to re-implement the built-in buttons.

A minimal re-implementation of the built-in buttons would look something like this:

import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return (
    <ConnectButton.Custom>
      {({
        account,
        chain,
        openAccountModal,
        openChainModal,
        openConnectModal,
      }) =>
        !account ? (
          <button onClick={openConnectModal}>Connect Wallet</button>
        ) : (
          <div>
            {chain && (
              <button onClick={openChainModal}>
                {chain.iconUrl && (
                  <img
                    alt={chain.name ?? 'Chain icon'}
                    src={chain.iconUrl}
                  />
                )}
                {chain.name ?? chain.id}
                {chain.unsupported && ' (unsupported)'}
              </button>
            )}
            <button onClick={openAccountModal}>
              {account.displayName}
              {account.displayBalance
                ? ` (${account.displayBalance})`
                : ''}
            </button>
          </div>
        )
      }
    </ConnectButton.Custom>
  );
};

The following props are passed to your render function.

Account properties

Prop	Type	Default
`account`	`object \| undefined`	–
`account.address`	`string`	–
`account.balanceDecimals`	`string \| undefined`	–
`account.balanceFormatted`	`string \| undefined`	–
`account.balanceSymbol`	`string \| undefined`	–
`account.displayBalance`	`string \| undefined`	–
`account.displayName`	`string`	–
`account.ensAvatar`	`string \| undefined`	–
`account.ensName`	`string \| undefined`	–

Chain properties

Prop	Type	Default
`chain`	`object \| undefined`	–
`chain.hasIcon`	`boolean`	–
`chain.iconUrl`	`string \| undefined`	–
`chain.iconBackground`	`string \| undefined`	–
`chain.id`	`number`	–
`chain.name`	`string \| undefined`	–
`chain.unsupported`	`boolean \| undefined`	–

Prop	Type	Default
`openAccountModal`	`() => void`	–
`openChainModal`	`() => void`	–
`openConnectModal`	`() => void`	–
`accountModalOpen`	`boolean`	–
`chainModalOpen`	`boolean`	–
`connectModalOpen`	`boolean`	–

Overview

Getting Started

Advanced

Custom ConnectButton

Creating a custom ConnectButton

Account properties

Chain properties

Overview

Getting Started

Advanced

Custom ConnectButton

Creating a custom ConnectButton

Account properties

Chain properties

Modal state properties