Kit
Guides

Custom Connect Button

There are two ways to customize the connect button.

1. Customize via ConnectButton.Custom

<ConnectButton.Custom>
   {({ openConnectModal, disconnect, isConnected, openChainModal, openProfileModal, account, chain }) => (
      <button onClick={openConnectModal}>Connect</button>
   )}
</ConnectButton.Custom>

2. Show The Connect Modal with useConnectModal hooks

const { open } = useConnectModal();
 
<button onClick={open}>Connect</button>

Custom Branding

📝

Available in version 2.2.1 and above

From version 2.2.0, you can now customize the branding of the Xellar Kit modal.

  • Go To Service Menu
  • Go To Embedded Wallets Menu
  • Clik On Wallet Config Tab
  • Then you can switch off the Show Xellar Brand toggle button to remove the Xellar branding from the modal.
  • Upload your logo
  • Done!

You can also set custom height of the logo by passing the customLogoHeight prop to the XellarKitProvider component.

<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
   <XellarKitProvider 
      customLogoHeight={42} // 👈 Add Here
   >
      {children}
   </XellarKitProvider>
</QueryClientProvider>
</WagmiProvider>
Setup AuthenticationDemo