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.
First import ConnectKitButton, then create a custom button component:
ExampleButton.jsx
1import { ConnectKitButton } from "connectkit";23export const ExampleButton = () => {4 return (5 <ConnectKitButton.Custom>6 {({ isConnected, isConnecting, show, hide, address, ensName }) => {7 return (8 <button onClick={show} style={yourButtonStyle}>9 {isConnected ? address : "Custom Connect"}10 </button>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";23import 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;1516 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`;2627export 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:
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 programatically 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 |