Rainbow logo
RainbowKit
1.0.0

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.

PropTypeDefault
labelstring Connect Wallet
accountStatusenum full
chainStatusenum { smallScreen: "icon", largeScreen: "full" }
showBalanceenum { smallScreen: false, largeScreen: true }

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, }} />