Getting Started

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 your app is wrapped in the necessary providers. Read more.

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

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

Use the label prop to set a custom ConnectButton text.

<ConnectButton label="Sign in" />

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" />

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" />

Use the showBalance prop to hide/show the balance.

Hide the balance.

<ConnectButton showBalance={false} />

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: 'avatar',
    largeScreen: 'full',
  }}
/>

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

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