> 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ページ上で、複数の関連するボタンを1つのまとまりとして表示するExperience Cloudコンポーネントです。

「保存」と「キャンセル」、「編集」と「削除」のような関連アクションや、さまざまなセクションへのナビゲーションオプションを並べて表示するのに使います。ボタンは1つの単位として視覚的につながっているため、関連する選択肢であることが分かりやすくなります。

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

***

## ボタングループの設定 <a href="#use-cases-and-examples" id="use-cases-and-examples"></a>

Avonniボタングループコンポーネントを、Experience Cloudサイトのデザインと機能にぴったり合うように調整するには、次の手順に従ってください。

### **主な設定**

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

この設定を有効にすると、ボタンを画面上で横並びに配置できます。無効にすると、ボタンは縦に積み重なります。

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

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

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

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

#### **ボタン**

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

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

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

***

## スタイル設定 <a href="#use-cases-and-examples" id="use-cases-and-examples"></a>

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

<details>

<summary>ラベル/アイコン</summary>

* **color:** デフォルトのテキストまたはアイコンの色を設定します。
* **color active:** ボタンがアクティブ（クリック済みまたはフォーカス中）のときのテキストまたはアイコンの色を設定します。
* **color hover:** ユーザーがボタン上にマウスを重ねたときのテキストまたはアイコンの色を設定します。
* **font family:** ボタンテキストに使用するフォントを指定します。
* **font size:** ボタンテキストのサイズを制御します。
* **font style:** フォントスタイルを設定します（例: normal、italic、oblique）。
* **font weight:** ボタンテキストの太さを決定します（例: normal、bold、bolder）。

</details>

<details>

<summary>背景</summary>

* **color:** ボタンのデフォルトの背景色を設定します。
* **color active:** ボタンがアクティブなときの背景色を設定します。
* **color hover:** ユーザーがボタン上にマウスを重ねたときの背景色を設定します。

</details>

<details>

<summary>枠線</summary>

* **color:** デフォルトの枠線色を設定します。
* **color active:** ボタンがアクティブなときの枠線色を設定します。
* **color hover:** ユーザーがボタン上にマウスを重ねたときの枠線色を設定します。
* **size:** 枠線の幅を制御します。
* **style:** 枠線のスタイルを指定します（例: solid、dashed、dotted）。

</details>

***

### **使用例**

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

```
ラベル/アイコン:
   color: white
   color hover: #f5f5f5 

背景:
   color: red 

枠線: 
   color: 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.