Connect Button

ConnectKit provides a custom component with render props for all the necessary wallet connection states for you to build your own connect button. This allows for unique behavior such as displaying custom copy for the button itself or changing when the ConnectKit modal shows/hides.

This page is for developers looking to build a custom connect button from scratch. If you're looking to just customize the font, theme, or colors; check out Customization.

Example

First import ConnectKitButton, then create a custom button component:

,ExampleButton.tsximport { ConnectKitButton } from "connectkit";

export const ExampleButton = () => {
  return (
    <ConnectKitButton.Custom>
      {({ isConnected, isConnecting, show, hide, address, ensName, chain }) => {
        return (
          <button onClick={show} style={yourButtonStyle}>
            {isConnected ? address : "Custom Connect"}
          </button>
        );
      }}
    </ConnectKitButton.Custom>
  );
};

You can now try styling your ExampleButton component and use some of the render props to display some additional states using any preference of styling techniques. The following example uses styled components:

,ExampleButton.tsximport { ConnectKitButton } from "connectkit";

import styled from "styled-components";
const StyledButton = styled.button`
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 14px 24px;
  color: #ffffff;
  background: #1a88f8;
  font-size: 16px;
  font-weight: 500;
  border-radius: 10rem;
  box-shadow: 0 4px 24px -6px #1a88f8;

  transition: 200ms ease;
  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 40px -6px #1a88f8;
  }
  &:active {
    transform: translateY(-3px);
    box-shadow: 0 6px 32px -6px #1a88f8;
  }
`;

export const ExampleButton = () => {
  return (
    <ConnectKitButton.Custom>
      {({ isConnected, show, truncatedAddress, ensName }) => {
        return (
          <StyledButton onClick={show}>
            {isConnected ? ensName ?? truncatedAddress : "Connect Wallet"}
          </StyledButton>
        );
      }}
    </ConnectKitButton.Custom>
  );
};

And that's it—you've now successfully built a custom blue connect button that shows a loading state and ENS name (when available).

Here's it in action:

Render Props Specification

For more advanced usage, ConnectKitButton.Custom provides the following render props:

Props	Description	Type
`isConnected`	Whether or not a wallet is connected.	boolean
`isConnecting`	If ConnectKit is currently connecting.	boolean
`show`	Function to show the modal. In the example above we bind this to onClick for the custom button.	Function
`hide`	Function to hide the modal. Mainly if you need to programmatically hide the modal.	Function
`address`	The address of the connected wallet.	string
`truncatedAddress`	A truncated version of the connected wallet.	string
`ensName`	ENS name if the connected wallet address has one. Otherwise empty string.	string

Connect Button

Example

Render Props Specification

On this page