Powered by

A design system from Family

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.jsx
1import { ConnectKitButton } from "connectkit";
2
3export const ExampleButton = () => {
4 return (
5 <ConnectKitButton.Custom>
6 {({ isConnected, isConnecting, show, hide, address, ensName }) => {
7 return (
8 <div onClick={show} style={yourButtonStyle}>
9 {isConnected ? address : "Custom Connect"}
10 </div>
11 );
12 }}
13 </ConnectKitButton.Custom>
14 );
15};

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.jsx
1import { ConnectKitButton } from "connectkit";
2
3import styled from "styled-components";
4const StyledButton = styled.button`
5 cursor: pointer;
6 position: relative;
7 display: inline-block;
8 padding: 14px 24px;
9 color: #ffffff;
10 background: #1a88f8;
11 font-size: 16px;
12 font-weight: 500;
13 border-radius: 10rem;
14 box-shadow: 0 4px 24px -6px #1a88f8;
15
16 transition: 200ms ease;
17 &:hover {
18 transform: translateY(-6px);
19 box-shadow: 0 6px 40px -6px #1a88f8;
20 }
21 &:active {
22 transform: translateY(-3px);
23 box-shadow: 0 6px 32px -6px #1a88f8;
24 }
25`;
26
27export const ExampleButton = () => {
28 return (
29 <ConnectKitButton.Custom>
30 {({ isConnected, show, truncatedAddress, ensName }) => {
31 return (
32 <StyledButton onClick={show}>
33 {isConnected ? ensName ?? truncatedAddress : "Connect Wallet"}
34 </StyledButton>
35 );
36 }}
37 </ConnectKitButton.Custom>
38 );
39};

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:

PropsDescriptionType
isConnectedWhether or not a wallet is connected.boolean
isConnectingIf ConnectKit is currently connecting.boolean
showFunction to show the modal. In the example above we bind this to onClick for the custom button.Function
hideFunction to hide the modal. Mainly if you need to programatically hide the modal.Function
addressThe address of the connected wallet.string
truncatedAddressA truncated version of the connected wallet.string
ensNameENS name if the connected wallet address has one. Otherwise empty string.string