> ## 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 title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  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)](/javascript/reference/react-quickstart) to get started.
</Card>

## 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>
);
```