# 按钮

`ConnectButton` 组件提供了一个预设样式且易于识别的按钮，用于启动 DID Connect 身份验证过程。它简化了为你的应用程序登录流程创建一致用户体验的过程。该按钮采用官方 DID Connect 品牌风格，包括徽标和配色方案，为用户提供了清晰的操作指引。

## 导入

要使用该按钮，请从库的 `Button` 模块中导入它。

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

## 基本用法

最常见的用例是将 `ConnectButton` 与 `useConnect` 钩子配对使用。按钮的 `onClick` 属性可以直接映射到钩子返回的 `open` 函数，以触发连接模态框。

```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} />
  );
}
```

默认情况下，按钮会渲染文本“Continue With”，后面跟着 DID Connect 徽标。

## 自定义

你可以轻松自定义按钮的外观和行为。

### 自定义文本

要更改默认文本，只需将你想要的内容作为子元素传递给组件即可。

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

### 额外属性

`ConnectButton` 是对 `@arcblock/ux/lib/Button` 组件（该组件基于 Material-UI 的 Button）的封装，并接受其所有标准属性。这允许进行广泛的自定义，例如禁用按钮、使其全宽或使用 `sx` 属性应用自定义样式。

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

## 属性

<x-field-group>
  <x-field data-name="children" data-type="React.ReactNode" data-required="false">
    <x-field-desc markdown>要在按钮内部显示的内容。如果未提供，则默认为 `"Continue With"`。</x-field-desc>
  </x-field>
  <x-field data-name="...rest" data-type="ButtonProps" data-required="false">
    <x-field-desc markdown>`ConnectButton` 接受任何对底层 Material-UI `Button` 组件有效的其他属性。这包括 `onClick`、`disabled`、`variant`、`color`、`fullWidth` 和 `sx` 等常见属性。</x-field-desc>
  </x-field>
</x-field-group>

## 下一步

既然你已经知道如何添加 `ConnectButton`，下一个合乎逻辑的步骤是了解为其功能提供支持的钩子。

<x-card data-title="useConnect 钩子" data-href="/hooks/use-connect" data-icon="lucide:hook">
  学习如何使用 useConnect 钩子以编程方式打开、关闭和管理 DidConnect UI 模态框。
</x-card>