Customize button design


We have included two props on the DynamicWidget to simplify customizing the style and content of Dynamic's connect button.


On the DynamicWidget, you can pass a className string to buttonClassName to control the button styles. You can also pass a string or element to innerButtonComponent to customize what content is shown in the button.

  innerButtonComponent='Connect Wallet'

Then in a CSS file you would specify the styles for .buttonClassName class.

.connectButton {  
  background-color: #4779FF !important;  
  padding: 14px 16px !important;
  border-color: white !important; 


Use !important

Note that you need !important to override our styles because of priorities. We are working on an update to remove this requirement in an upcoming release targeted for Jan 2023.


Based on the code snippets above, we get the following connect button: