Customize button design

Summary

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

Usage

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.

<DynamicWidget
  buttonClassName='connectButton'
  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.

Example

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