> 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.md).
# AX - Button
## 概要
**AX - Button** は、Experience Sites ページ上にクリック可能なボタンを作成し、ナビゲーション、フォーム送信、レコード作成、モーダルの表示などのアクションをトリガーする Experience Cloud コンポーネントです。
カスタムの CTA の追加、フォーム送信、特定ページへの移動、レコード作成、フローの起動に使用します。Experience Builder でコードなしで、ボタンのラベル、スタイル、アイコン、アクションを設定できます。
ポータルの CTA、カスタムナビゲーション、「お問い合わせ」アクション、レコード作成ワークフロー、または、明確でブランドに沿ったボタンが必要なあらゆるユーザー操作に最適です。
***
## **ボタンの設定**
Experience Builder で AX - Button をページにドラッグした後、主に 2 つのことを設定します。ボタンの見た目と、ユーザーがクリックしたときに何が起こるかです。
### **ボタンの外観**
これらの設定で、ページ上でのボタンの見た目を制御します。
**ラベル** – ボタンに表示されるテキストです。短く、アクションを示すものにしてください（例：「リクエストを送信」「詳細を表示」「お問い合わせ」）。
**アイコン名** – ラベルの横にアイコンを追加して、ユーザーがアクションをすばやく理解できるようにします。Salesforce のアイコンライブラリから選択できます。一般的には、ダウンロードには「utility:download」、連絡用アクションには「utility:email」などが使われます。
**アイコンの位置** – アイコンをラベルの左または右に配置します。左配置は多くの場合に適しており、右配置は前進するナビゲーションを示すのに使えます。
**バリアント** – ボタンの視覚スタイルです。通常、primary（強調表示で目を引く）、secondary（控えめ）、destructive（赤、削除アクション用）などがあります。アクションの重要度に応じて選択します。
**水平方向の配置** – コンテナ内でのボタンの位置を左、中央、右から選択します。中央揃えは単独の CTA に適しており、左揃えはフォームのボタンに向いています。
**拡張** – 有効にすると、ボタンがコンテナの全幅に合わせて広がります。目立たせたい CTA や、上にあるフォーム項目の幅にボタンを合わせたい場合に使用します。
**無効** – ユーザーがボタンをクリックできないようにします。たとえば、必須項目が入力されるまで「送信」ボタンを無効にする場合など、アクションがまだ利用できないときに使用します。
### **ボタンのアクション（リンク先）**
この **リンク先** 設定で、ユーザーがボタンをクリックしたときに何が起こるかが決まります。実現したい内容に合ったアクションタイプを選択してください。
[**トーストを表示**](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/show-toast.md)
ページ上部に表示され、数秒後に消える簡単な通知メッセージを表示します。
使用する場面: 「変更を保存しました」や「リクエストを送信しました」など、ユーザー操作を必要としない確認メッセージ。トーストは、ユーザーの作業を中断せずにフィードバックを提供します。
[**移動**](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/navigate.md)
ユーザーを別のページに移動します。Experience Site 内のページにも、外部 URL にも移動できます。
使用する場面: 詳細ページに移動する「詳細を見る」ボタン、「ホームに戻る」ナビゲーション、外部リソースへのリンクなど。標準ページ、レコードページ、カスタム URL に移動できます。
[**アラートモーダルを開く**](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-alert-modal.md)
ユーザーが続行する前に確認が必要なメッセージを含むポップアップウィンドウを開きます。
使用する場面: 利用規約、プライバシー開示、または操作を進める前に読んでもらう必要がある警告など、ユーザーが確認すべき重要なお知らせ。
[**確認ダイアログを開く**](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-confirm.md)
ユーザーにアクションの確認またはキャンセルを求める確認ダイアログを表示します。
使用する場面: レコードの削除、送信のキャンセル、アクセス権の削除など、取り消せない結果を伴うアクション。ダイアログによって、続行する前にユーザーが再考できます。
[**フロー ダイアログを開く**](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-flow-dialog.md)
Salesforce Flow をポップアップのモーダルウィンドウで起動します。
使用する場面: サポートケースの送信、アンケートの完了、アカウント情報の更新など、複数ステップのプロセスや、案内付きのワークフロー。Flow Builder でフローを作成し、それをボタンに接続します。フローは現在のページから移動せずにモーダル内で実行されます。
***
## 仕様
{% tabs %}
{% tab title="プロパティ" %}
| 名前 | 説明 | 使用方法 |
| ------------ | ---------------------------- | ------------------------------------------------------------ |
| **ラベル** | ボタンに表示するテキストを定義します。 | ユーザーに対してボタンのアクションを示す、簡潔でわかりやすいラベルを入力してください。 |
| **アイコン名** | ボタンに表示するアイコンを選択します。 | ボタンのアクションを視覚的に表す適切なアイコンを選択して、ユーザーの理解を高めます。 |
| **アイコンの位置** | ボタン内でのアイコンの位置を決定します。 | ボタンの視覚的なバランスを取り、Web ページのデザイン方針に合う位置を選択します。 |
| **バリアント** | ボタンの事前定義済みスタイルバリエーションを選択します。 | ボタンのアクションの文脈と、Web ページ全体のデザイン言語に合うバリエーションを選択します。 |
| **水平方向の配置** | コンテナ内でのボタンの水平方向の配置を定義します。 | 視覚的な調和を実現し、Web ページのレイアウト要件を満たすようにボタンを配置します。 |
| **ストレッチ** | ボタンをコンテナいっぱいに広げるかどうかを決定します。 | このオプションを有効にすると、ボタンが水平方向に拡張され、コンテナ内の使用可能なスペースを埋めます。 |
| **無効** | ボタンの有効状態または無効状態を制御します。 | ボタンを無効にしてユーザー操作を防止します。特定のアクションが適用されない場合や、一時的に防ぐ必要がある場合に便利です。 |
| {% endtab %} | | |
{% tab title="外観" %}
### **間隔（上、下、左、右）**
* **上マージン、下マージン、左マージン、右マージン：** これらは、各方向のボタン周囲の余白を制御します。他の要素との重なりを避け、適切なスペースを確保しながら、ボタンを正確に配置するために使用します。
### **ラベル/アイコン**
* **色：** ボタンのテキストまたはアイコンの既定色。
* **アクティブ時の色：** ボタンがクリックまたはタップされたときに、テキスト/アイコンが変わる色。
* **ホバー時の色：** ユーザーがマウスをボタン上に置いたときに、テキスト/アイコンが変わる色。
* **フォントファミリー：** ボタンのテキストラベルに使用する書体を指定します。サイト全体のデザインに合っていて、読みやすいことを確認してください。
* **フォントサイズ：** ラベルのテキストサイズを制御します。必要に応じて可読性や強調のために調整します。
* **フォントスタイル:** 通常、斜体、オブリークなど、テキストのスタイルを設定します。特別な強調が必要な場合に控えめに使用します。
* **フォントの太さ：** テキストの太さを決定します。primary ボタンと secondary ボタンを区別するために、異なるウェイトの使用を検討してください。
### **背景**
* **背景色：** ボタンの背景の既定色。
* **アクティブ時の背景色：** ボタンがクリックまたはタップされたときの背景色。
* **ホバー時の背景色：** ユーザーがマウスをボタン上に置いたときの背景色。
### **枠線**
* **ボーダー色：** ボタンの枠線の色。
* **アクティブ時の枠線色：** ボタンがアクティブなときの枠線色。
* **ホバー時の枠線色：** ユーザーがマウスをボタン上に置いたときの枠線色。
* **ボーダーサイズ：** 枠線の太さ（ピクセル単位）。
* **枠線スタイル：** 枠線の種類。実線、点線、破線など。
* **境界線の半径:** ボタンの角の丸みを制御します。値が大きいほど、より柔らかく丸みのあるボタンになります
{% 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.md?ask=&goal=
```
`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.