> 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 - ボタン

## 概要

**AX - ボタン** は、Experience Sitesページ上にクリック可能なボタンを作成し、ナビゲーション、フォーム送信、レコード作成、モーダルを開くといったアクションをトリガーするExperience Cloudコンポーネントです。

カスタムの行動喚起を追加したり、フォームを送信したり、特定のページへ移動したり、レコードを作成したり、フローをトリガーしたりするために使用します。Experience Builderでは、コードを書かずにボタンのラベル、スタイル、アイコン、アクションを設定できます。

ポータルのCTA、カスタムナビゲーション、「お問い合わせ」アクション、レコード作成ワークフロー、または明確でブランドに合ったボタンが必要なあらゆるユーザー操作に最適です。

## 設定

Experience BuilderでAX - ボタンをページにドラッグした後、主に2つのことを設定します。ボタンの見た目と、ユーザーがクリックしたときに起こることです（ [インタラクション](#interactions)).

### ボタンの外観

これらの設定は、ページ上でのボタンの見た目を制御します。

**ラベル** は、ボタンに表示されるテキストです。簡潔でアクション指向にしてください（例: 「リクエストを送信」、「詳細を表示」、「お問い合わせ」）。

**アイコン名** は、ユーザーがアクションをすばやく理解できるように、ラベルの横にアイコンを追加します。Salesforceのアイコンライブラリから選択できます。一般的な選択肢には、 `utility:download` はダウンロード用、または `utility:email` は問い合わせアクション用です。 **アイコンの位置** は、アイコンをラベルの `左` または `右` に配置します。ほとんどの場合は左が適していますが、右は前方へのナビゲーションを示すことができます。

**バリアント** は、ボタンの視覚的なスタイルです: `base`, `neutral`, `brand`, `brand-outline`, `border`, `border-filled`, `border-inverse`, `bare`, `bare-inverse`, `inverse`, `container`, `success`, `destructive`、または `destructive-text`。アクションの重要度とページのデザイン言語に合うものを選択してください。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FHxGDvstEp4whipGzxnuY%2Fax-button-variant.png?alt=media" alt=""><figcaption><p>14種類のバリアントのうち11種類を、明るいページ上で表示しています。3種類のinverseバリアントは暗い背景用に設計されているため、ここには表示されていません。白地では、Bare Inverseには表示可能なテキストがなく、Border Inverseは空のアウトラインになります。</p></figcaption></figure>

**水平方向の配置** は、コンテナ内でのボタンの位置を設定します—`左`, `中央`、または `右`。単独のCTAには中央が適しており、フォームボタンには左が適しています。

**引き伸ばし** は、ボタンをコンテナの幅いっぱいに広げます。目立つCTAや、上部のフォームフィールドの幅に合わせる場合に使用します。

**無効** は、ユーザーがボタンをクリックできないようにします。必須フィールドの入力待ちの「送信」ボタンなど、アクションをまだ実行できない場合に使用します。

**タイトル** は、ボタンにマウスオーバーしたときに表示されるツールチップテキストを設定し、 **代替テキスト** は、アイコンのみを表示するボタンを説明するアクセシブルなテキストを提供します。

**CMSドキュメントのダウンロード** および **ドキュメントURLまたは式によるダウンロード** は、インタラクションをトリガーする代わりにCMSドキュメントを参照するか直接URLを指定して、クリック時にボタンからファイルをダウンロードできるようにします。

## インタラクション

「 **リンク先** 」設定は、ユーザーがボタンをクリックしたときに何が起こるかを決定し、7つのアクションタイプを提供します。実現したい内容に合うものを選択してください。このうち2つは、以下の見出しよりもパネル内で少し長い表記になっています: **トースト通知を表示** および **確認ダイアログを開く**.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-fce8b6da22bc7fa9e8724be171e44a69d9a706e1%2F2023-12-30_11-30-24.png?alt=media" alt="" width="188"><figcaption></figcaption></figure>

### [トーストを表示](/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 Builderでフローを構築してからボタンに接続します。フローは現在のページから移動せずにモーダル内で実行されます

### [ダウンロード](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/download.md)

ボタンがクリックされたときに、Salesforceファイル、パブリックリンク、またはURLからファイルをダウンロードします。

使用する場面: 価格表、明細書、契約書、またはポータルユーザーが保存する必要のあるあらゆるドキュメント。ファイルがボタンに固定されているのではなく、インタラクションによって決まる場合は、 **CMSドキュメントのダウンロード** 設定よりこちらを使用してください。

### すべてのクエリを更新

ページ上のすべてのクエリを再実行し、ボタン周辺のコンポーネントに最新のデータを表示します。

使用する場面: フローダイアログまたはモーダルによってレコードが変更された後、ユーザーに再読み込みを求めずにページの残りの部分を最新の状態にする場合。

## スタイル設定

ボタンの外観は、プロパティエディターの **スタイル** セクションからカスタマイズします。

{% tabs %}
{% tab title="余白" %}
各方向（上、下、左、右）のボタン周囲の余白を制御します。これらを使用してボタンを正確に配置し、他の要素との重なりを避け、ゆとりを作ります。
{% endtab %}

{% tab title="ラベル/アイコン" %}

* **色:** ボタンのテキストまたはアイコンのデフォルトの色です。
* **アクティブ時の色:** ボタンがクリックまたはタップされたときにテキスト/アイコンが変わる色です。
* **ホバー時の色:** ユーザーがボタンにマウスオーバーしたときにテキスト/アイコンが変わる色です。
* **フォントファミリー:** ボタンのテキストラベルに使用する書体を指定します。サイト全体のデザインと一致し、読みやすいことを確認してください。
* **フォントサイズ:** ラベルテキストのサイズを制御します。必要に応じて、読みやすさと強調のために調整してください。
* **フォントスタイル:** 標準、斜体、オブリークなど、テキストのスタイルを設定します。特別な強調のために控えめに使用してください。
* **フォントの太さ:** テキストの太さを決定します。プライマリボタンとセカンダリボタンを区別するために、異なる太さの使用を検討してください。
  {% 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.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.