ConnectButton

Using and customising the ConnectButton

This is the main component. It is responsible for rendering the connect/disconnect button, as well as chain-swapping UI.

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

export const YourApp = () => {
  return <ConnectButton />;
};

Note: Make sure rour app must is wrapped in the necessary providers. Read more.

The ConnectButton component exposes several props to customize its appearance by toggling the visibility of different elements.

Note: the built-in largeScreen breakpoint is 768px.

Account status

Here are a few different ways you can use the accountStatus prop.

Only show the account's avatar.

<ConnectButton accountStatus="avatar" />

Only show the account's address.

<ConnectButton accountStatus="address" />

Chain status

Here are a few different ways you can use the chainStatus prop.

Only show the current chain's icon.

<ConnectButton chainStatus="icon" />

Only show the current chain's name.

<ConnectButton chainStatus="name" />

Hide the chain UI entirely.

<ConnectButton chainStatus="none" />

Show balance

Use the showBalance prop to hide/show the balance.

Hide the balance.

<ConnectButton showBalance={false} />

Responsive

These props can also be defined in a responsive format.

On small screens, only show account icon. But on large screens, show icon and address.

<ConnectButton
  accountStatus={{
    smallScreen: 'icon',
    largeScreen: 'full',
  }}
/>

On small screens, hide balance. But on large screens, show it.

<ConnectButton
  showBalance={{
    smallScreen: false,
    largeScreen: true,
  }}
/>