On the WalletConnect documentation, it says how to create a pre-styled button:

import { Web3Button } from "@web3modal/react";

interface Props {
  icon?: "show" | "hide";
  label?: string;
  balance?: "show" | "hide";

return <Web3Button />;

This is the result, and the class is empty: enter image description here

In the code, I see it makes some reference to some classes, but how to add a custom value there? Is it even possible? enter image description here

If it is not possible? How can I style that button?

1 Answer 1


When you change the color of the Modal theme, you can change the button colors as well.

Doc: https://docs.walletconnect.com/2.0/web/web3modal/react/wagmi/theming

          '--w3m-font-family': 'Roboto, sans-serif',
          '--w3m-accent-color': '#',
          '--w3m-accent-fill-color': '#',
          '--w3m-background-color': '#',

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.