> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# DynamicConnectButton

> [card] Recommended: JavaScript SDK with React Hooks
>
> For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](https://docs.dynamic.xyz/docs/javascript/reference/react-quickstart.md) to get started.

## Settings

Settings available when you first initialize `DynamicWidget` in your App.

| Method | Description |
| - | - |
| buttonContainerClassName: string; | This is an optional component passed in to DynamicConnectButton. |
| buttonClassName: string; | Specifies the type of display used when a user clients on the Dynamic Widget. Defaults to modal. |
| children: ReactNode; | React components to be passed as children of the DynamicConnectButton |

## Examples

#### Add children

```TypeScript theme={"system"}
const children = (
  <div data-testid='exampleChild'>Connect a new wallet!</div>
) as React.ReactElement;

export const LoginView = () => (
  <DynamicConnectButton>{children}</DynamicConnectButton>
);
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.