> 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-group.md).

# AX - ボタングループ

## 概要

**AX - ボタングループ** Experience Sites ページ上で、複数の関連ボタンをひとつの統一されたグループとしてまとめて表示する Experience Cloud コンポーネントです。

「保存」と「キャンセル」、「編集」と「削除」、または異なるセクションへのナビゲーションオプションのような、関連するアクションを横並びで表示するために使用します。ボタンは単一のユニットとして視覚的に結びついたままになり、関連する選択肢であることが明確になります。

フォームの操作、レコード管理オプション、タブのようなナビゲーション、またはポータル利用者が複数の関連アクションから選ぶ必要があるあらゆる場面に最適です。

## 設定

以下の手順に従って、Avonni Button Group コンポーネントを Experience Cloud サイトのデザインと機能にぴったり合うように調整してください：

### **主な設定**

#### **行として表示**

この設定を有効にすると、ボタンを画面横方向に並べて配置します。無効にすると、ボタンは縦に積み重なります。

#### **水平配置**

ボタングループをコンテナ内のどこに配置するかを指定します — `左`, `中央`、または `右`.

#### **表示するボタン**

この設定は、画面に直接表示されるボタンの最大数を決定します。指定した数より多くのボタンがある場合、残りは使いやすいドロップダウンメニューに配置されます。

#### **ボタンメニュー**

* **ラベル:** 追加のボタンを含むドロップダウンメニューを開くボタンに表示するテキストを設定します。
* **アイコン名:** ボタンメニューで適切なアイコンを選択します（使用可能なアイコンについては Salesforce Lightning Design System を参照してください）。
* **バリアント:** ボタンメニューの見た目のスタイルを選択します（例: 'neutral'、'brand'、'inverse'）。
* **メニュー配置:** ドロップダウンメニューをボタンに対してどの位置に表示するかを選択します（'left' または 'right'）。

#### **ボタン**

* **ラベル:** ボタンに表示したいテキストを入力します。
* **アイコン名:** 必要に応じて、ボタンに配置するアイコンを選択します。
* **アイコン位置:** アイコンをボタンラベルの 'left' または 'right' のどちらに配置するかを指定します。
* **バリアント:** 事前定義されたスタイル（'neutral'、'brand'、'destructive' など）からボタンの外観を選択できます。
* **無効:** ボタンを最初から無効状態にして、ユーザー操作を防ぎたい場合はこの設定を有効にします。
* **非表示：** ボタンを初期表示で非表示にしたい場合は、この設定を有効にします。
* **クリック時のインタラクション:** この重要なセクションでは、ユーザーがボタンをクリックしたときに何が起こるかを定義できます。利用可能なアクションと設定の包括的な一覧については、「On Click Interactions」のドキュメントページを参照してください。

### **重要な考慮事項**

* 明確な視覚的階層を意識してボタングループを設計してください。主要なアクションを強調するには 'brand' バリアントを使用します。
* 重大な結果を伴うアクションには、'destructive' バリアントを控えめに使用してください。
* ボタンラベルは簡潔で、機能を正確に表すようにしてください。
* 最適なユーザー体験を確保するため、さまざまなデバイスやブラウザでボタングループの設定を十分にテストしてください。

## スタイリング

Avonni Button Group コンポーネントには、Experience Cloud サイト内での外観をカスタマイズするための包括的なスタイル設定オプションがあります。以下に、利用可能なスタイル属性の内訳を示します：

{% tabs %}
{% tab title="マージン" %}
グループの外側の余白を制御します。
{% endtab %}

{% tab title="パディング" %}
グループの内側の余白を制御します。
{% endtab %}

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

* **色:** デフォルトのテキストまたはアイコンの色を設定します。
* **アクティブ時の色:** ボタンがアクティブ（クリックまたはフォーカス）になったときのテキストまたはアイコンの色を設定します。
* **ホバー時の色:** ユーザーがボタン上にマウスを置いたときのテキストまたはアイコンの色を設定します。
* **フォントファミリー:** ボタンテキストに使用するフォントを指定します。
* **フォントサイズ:** ボタンテキストのサイズを制御します。
* **フォントスタイル:** フォントスタイルを設定します（例: normal、italic、oblique）。
* **フォントウェイト:** ボタンテキストの太さを決定します（例: normal、bold、bolder）。
  {% endtab %}

{% tab title="背景" %}

* **色:** ボタンのデフォルト背景色を設定します。
* **アクティブ時の色:** ボタンがアクティブなときの背景色を設定します。
* **ホバー時の色:** ユーザーがボタン上にマウスを置いたときの背景色を設定します。
  {% endtab %}

{% tab title="枠線" %}

* **色:** デフォルトの境界線の色を設定します。
* **アクティブ時の色:** ボタンがアクティブなときの境界線の色を設定します。
* **ホバー時の色:** ユーザーがボタン上にマウスを置いたときの境界線の色を設定します。
* **サイズ:** 境界線の幅を制御します。
* **スタイル:** 境界線のスタイルを指定します（例: solid、dashed、dotted）。
  {% endtab %}
  {% endtabs %}

### **使用例**

赤い背景、白いテキスト、そしてさりげないホバー効果を持つボタングループを作成するには、次の設定を検討してください：

```
ラベル/アイコン:
   色: white
   ホバー時の色: #f5f5f5 

背景:
   色: red 

境界線: 
   色: red  
```

### **重要な注意事項**

* 希望するカラーコードを見つけるには、Web カラーピッカーまたはジェネレーターを使用してください。
* Experience Cloud サイト全体のデザインと配色の一貫性を保つように努めてください。
* 希望どおりの視覚効果とアクセシビリティを確保するため、スタイル変更は必ずテストしてください。


---

# 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-group.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.