> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-button-dialog.md).

# AX - ボタン ダイアログ

## 概要

**AX - ボタン ダイアログ** は、Experience Sites ページでクリックするとモーダルポップアップを開き、ユーザーを現在のページから移動させずにコンテンツを表示する Experience Cloud コンポーネントです。

追加の詳細、動画コンテンツ、確認メッセージ、フォーム、またはオーバーレイで表示される警告を示すために使用します。Experience Builder でポップアップのコンテンツを作成するには、Experience Cloud コンポーネントをモーダル内に配置します。

「詳細はこちら」の説明、動画デモ、利用規約、確認プロンプト、またはポータルの現在のページ上に一時的に表示する必要があるあらゆるコンテンツに最適です。

<figure><img src="/files/49092e20805e491fd57e3a5709c646fda8b5a1dc" alt=""><figcaption></figcaption></figure>

***

## Avonni ボタン ダイアログの設定

### **ボタン ダイアログを魅力的にする**

1. **コンポーネントを追加する:** Avonni Button Dialog コンポーネントを見つけて、Web サイトにドラッグします。
2. **見栄えを良くする:** ボタンのテキスト（ラベル）、色スタイル（バリアント）、および好みのその他の表示詳細を変更できます。
3. **クリックして作成する:** ボタンをクリックすると、ポップアップボックス（モーダル）が表示されます。Avonni Video Component やその他の便利なものなど、さまざまな要素をこのボックスにドラッグできます。

### **追加設定**

* **ヘッダーを非表示にする:** これにより、ポップアップボックス上部のタイトルバーが削除されます。
* **サイズ：** ポップアップボックスのサイズを選択します。
* **フッターを表示する:** ポップアップの下部にセクションを追加します。たとえば、「OK」や「キャンセル」ボタンに最適です。
* **コンテンツの内側余白:** これは、ボックス内の要素とボックスの端との間隔を制御します。

<figure><img src="/files/e3db7e16137be269c45a989c8944fee43267be0d" alt=""><figcaption></figcaption></figure>

***

## 設定

{% tabs %}
{% tab title="ボタンの設定" %}

| 名前           | 説明                                                                      |
| ------------ | ----------------------------------------------------------------------- |
| **ラベル**      | ボタンに表示されるテキスト。                                                          |
| **アイコン名**    | ボタンに表示するアイコンの Lightning Design System 名です。                              |
| **アイコンの位置**  | ラベルに対するアイコンの位置。オプションは「left」または「right」です。                                |
| **バリアント**    | Salesforce Design System の定義済みスタイルに従って、「brand」「neutral」などのボタンの外観を定義します。 |
| **水平方向の配置**  | コンテナ内でボタンを水平方向に配置します。オプションは「left」「center」「right」です。                     |
| **ストレッチ**    | ボタンがコンテナの幅いっぱいに広がるかどうかを決定します。                                           |
| **無効**       | ボタンを無効にし、ユーザーの操作を防ぎます。                                                  |
| {% endtab %} |                                                                         |

{% tab title="ダイアログの設定" %}

| 名前              | 説明                                           |
| --------------- | -------------------------------------------- |
| **ヘッダーを非表示にする** | ダイアログのヘッダーの表示/非表示を切り替えます。                    |
| **サイズ**         | ダイアログのサイズを設定します。オプションには「`小`', '`中`」、または「`大`. |
| **フッターを表示**     | アクションボタンを含む可能性があるダイアログのフッターを表示するかどうかを決定します。  |
| {% endtab %}    |                                              |

{% tab title="🎨 スタイリング" %}

| 名前            | 説明                          |
| ------------- | --------------------------- |
| **ヘッダー**      | ダイアログのヘッダーの背景色を指定します。       |
| **コンテンツ**     | ダイアログのメインコンテンツ領域の背景色を設定します。 |
| **フッター**      | フッター領域の背景色を定義します。           |
| {% endtab %}  |                             |
| {% endtabs %} |                             |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-button-dialog.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.