# Button

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

  // 例：プロセス実行中にボタンを無効にする
  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>ボタン内に表示するコンテンツ。指定しない場合、デフォルトは`"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>