# 按鈕

`ConnectButton` 元件提供了一個預設樣式且易於識別的按鈕，用於啟動 DID Connect 身份驗證過程。它簡化了為您的應用程式登入流程建立一致使用者體驗的過程。該按鈕採用 DID Connect 官方品牌設計，包括標誌和配色方案，為使用者提供了清晰的行動號召。

## 匯入

若要使用此按鈕，請從函式庫的 `Button` 模組中匯入。

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

## 基本用法

最常見的使用案例是將 `ConnectButton` 與 `useConnect` hook 搭配使用。按鈕的 `onClick` 屬性可以直接對應到 hook 回傳的 `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 標誌。

## 自訂

您可以輕鬆自訂按鈕的外觀和行為。

### 自訂文字

若要變更預設文字，只需將您想要的內容作為 children 傳遞給元件即可。

```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}>
      使用 DID 錢包登入
    </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();

  // 範例：在某個程序執行時禁用按鈕
  const isLoading = true; 

  return (
    <ConnectButton
      onClick={open}
      disabled={isLoading}
      fullWidth
      sx={{ mt: 2, mb: 2 }}
    >
      {isLoading ? '連線中...' : '使用 DID 錢包登入'}
    </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`，下一步理所當然是了解為其功能提供支援的 hook。

<x-card data-title="useConnect Hook" data-href="/hooks/use-connect" data-icon="lucide:hook">
  了解如何使用 useConnect hook 以程式化方式開啟、關閉和管理 DidConnect UI 對話框。
</x-card>