Style Web3Button

[Piotada]

Hi guys I was struggling to style the web3Button on a react typescript app but there's no way to change padding or width or border, do you have a solution??
thank you

[0xAlexander]

I would also like to know if it's possible to define the dimensions for the web3button. Just padding would do. @0xasimetriq got any ideas?

Theming options are confined only to styling (https://docs.walletconnect.com/2.0/web/web3modal/react/wagmi/theming#general-style-variables)

[glitch-txs]

You can create your own button and handle the modal with useWeb3Modal hook
https://docs.walletconnect.com/2.0/web/web3modal/react/wagmi/hooks#useweb3modal

Here an example
https://github.com/WalletConnect/web3modal-examples/blob/main/web3modal-wagmi-react/src/components/CustomButton.jsx

[0xAlexander]

You can create your own button and handle the modal with useWeb3Modal hook https://docs.walletconnect.com/2.0/web/web3modal/react/wagmi/hooks#useweb3modal

Here an example https://github.com/WalletConnect/web3modal-examples/blob/main/web3modal-wagmi-react/src/components/CustomButton.jsx

Thanks for the prompt reply. It would take an enormous amount of time to re-create what web3button has (ENS / Balance and so on), just to get exposure to padding.

Can you please consider adding padding to the variables? That's all it takes to get dimensional exposure..

[0xAlexander]

Like for example, consider something else too:

I have wrapped the web3button into my own MUI Box, and i'm pretty close to the desired design.

If only we had exposure through variable into:

1. Background color of the outter box (just like we have with accent color)
2. border size or color

We would be golden.

Production through variables and wrapping box

Figma Design:

We would very very happy if these were considered as variables <3

[LucasMoskun]

I agree, even just being able to add padding would be very useful.