# Button

The `ConnectButton` component offers a pre-styled and recognizable button for initiating the DID Connect authentication process. It simplifies creating a consistent user experience for your application's login flow. The button is styled with the official DID Connect branding, including the logo and color scheme, providing a clear call-to-action for users.

## Import

To use the button, import it from the library's `Button` module.

```javascript icon=logos:javascript
import ConnectButton from '@arcblock/did-connect-react/lib/Button';
```

## Basic Usage

The most common use case is to pair the `ConnectButton` with the `useConnect` hook. The `onClick` prop of the button can be directly mapped to the `open` function returned by the hook to trigger the connection modal.

```javascript Basic Usage icon=logos:react
import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';

export default function MyLoginComponent() {
  const { open } = useConnect();

  return (
    <ConnectButton onClick={open} />
  );
}
```

By default, the button renders with the text "Continue With" followed by the DID Connect logo.

## Customization

You can easily customize the button's appearance and behavior.

### Custom Text

To change the default text, simply pass your desired content as children to the component.

```javascript Customizing Button Text icon=logos:react
import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';

export default function CustomLoginComponent() {
  const { open } = useConnect();

  return (
    <ConnectButton onClick={open}>
      Login with DID Wallet
    </ConnectButton>
  );
}
```

### Additional Props

The `ConnectButton` is a wrapper around the `@arcblock/ux/lib/Button` component (which is based on Material-UI's Button) and accepts all of its standard props. This allows for extensive customization, such as disabling the button, making it full-width, or applying custom styles with the `sx` prop.

```javascript Passing Additional Props icon=logos:react
import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';

export default function DisabledButtonComponent() {
  const { open } = useConnect();

  // Example: disable the button while a process is running
  const isLoading = true; 

  return (
    <ConnectButton
      onClick={open}
      disabled={isLoading}
      fullWidth
      sx={{ mt: 2, mb: 2 }}
    >
      {isLoading ? 'Connecting...' : 'Login with DID Wallet'}
    </ConnectButton>
  );
}
```

## Props

<x-field-group>
  <x-field data-name="children" data-type="React.ReactNode" data-required="false">
    <x-field-desc markdown>The content to display inside the button. If not provided, it defaults to `"Continue With"`.</x-field-desc>
  </x-field>
  <x-field data-name="...rest" data-type="ButtonProps" data-required="false">
    <x-field-desc markdown>The `ConnectButton` accepts any other props that are valid for the underlying Material-UI `Button` component. This includes common props like `onClick`, `disabled`, `variant`, `color`, `fullWidth`, and `sx`.</x-field-desc>
  </x-field>
</x-field-group>

## Next Steps

Now that you know how to add a `ConnectButton`, the next logical step is to understand the hook that powers its functionality.

<x-card data-title="useConnect Hook" data-href="/hooks/use-connect" data-icon="lucide:hook">
  Learn how to programmatically open, close, and manage the DidConnect UI modal using the useConnect hook.
</x-card>
