#### **伸縮**
有効にすると、グループはコンテナの幅いっぱいに広がり、ボタンはその間でスペースを共有します。オフのままにすると、グループは内容幅のままになり、それが **水平配置** 配置
アイコンのみを表示するボタンはそれぞれ独自の幅を保つため、ラベル付きのボタンが余分なスペースを使い、中央のアイコンの周囲に空白が残ることはありません。
#### **水平配置**
ボタン グループをコンテナ内で左・中央・右に配置します。パネルでは 3 つの配置アイコンとして表示されます。既定では左で、グループに対してのみ適用され、 **伸縮** がオフのとき。
#### **表示ボタン**
この設定は、画面上に直接表示するボタンの最大数を決定します。指定した数より多くボタンがある場合、残りは使いやすいドロップダウン メニューに配置されます。
#### **ボタン メニュー属性**
* **ラベル:** 追加ボタンを含むドロップダウン メニューを開くボタンに表示するテキストを設定します。
* **アイコン名:** ボタン メニューで適切なアイコンを選択します（利用可能なアイコンについては Salesforce Lightning Design System を参照してください）。
* **バリアント:** ボタン メニューの見た目のスタイルを選択します — **ベア**, **ベア インバース**, **ボーダー**, **塗りつぶしボーダー**, **ボーダー インバース**, **ブランド**, **ブランド アウトライン**, **コンテナ**, **デストラクティブ**, **デストラクティブ テキスト**, **インバース**, **ニュートラル** （既定）または **成功**.
* **メニュー配置:** ドロップダウン メニューをボタンに対してどの位置に配置するかを選択します — **自動**, **左**, **中央**, **右**, **左下**, **下中央** または **右下**。既定の **自動**は、ビューポート内で収まる場所にメニューを配置します。
#### **ボタン**
* **ラベル:** ボタンに表示したいテキストを入力します。
* **アイコン名:** 必要に応じて、ボタンに配置するアイコンを選択します。
* **アイコンソース:** Lightning Design System のアイコンの代わりに、独自の画像をボタンのアイコンとして使用します。
* **アイコン位置:** アイコンがボタンラベルの **左** （既定）または **右** ボタンラベルの **ラベル**: アイコンのみのボタンには、アイコンを配置するためのラベルがありません。
* **バリアント:** ボタンの外観を選択します — **ベア**, **ベア インバース**, **ベース**, **ボーダー**, **塗りつぶしボーダー**, **ボーダー インバース**, **ブランド**, **ブランド アウトライン**, **コンテナ**, **デストラクティブ**, **デストラクティブ テキスト**, **インバース**, **ニュートラル** （既定）または **成功**.
* **無効:** ボタンを無効状態で開始し、ユーザーの操作を防ぎたい場合にこの設定を有効にします。
* **非表示:** ボタンを最初は表示しないようにしたい場合にこの設定を有効にします。
* **タイトル:** ユーザーがボタンにカーソルを合わせたときに表示されるツールチップ テキストです。
* **代替テキスト:** ボタンを説明するアクセシブルなテキストで、スクリーン リーダーによって読み上げられます。ボタンにアイコンのみが表示され、ラベルがない場合は必ず設定してください。
* **クリック時:** この重要なセクションでは、ユーザーがボタンをクリックしたときに何が起こるかを定義できます。可能なアクションと設定の一覧については、「On Click Interactions」のドキュメント ページを参照してください。
### **重要な考慮事項**
* 明確な視覚的階層を意識して Button Group を設計してください。 **ブランド** バリアントを使用して主要なアクションを強調します。
* 〜を使用 **デストラクティブ** バリアントは、重大な結果を伴うアクションに対して控えめに使用します。
* ボタンのラベルは簡潔で、その機能を正確に表すようにしてください。
* 最適なユーザー体験を確保するため、さまざまなデバイスとブラウザで Button Group の設定を必ず十分にテストしてください。
## スタイリング
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 %}
### **使用例**
赤い背景、白いテキスト、控えめなホバー効果を持つボタングループを作成するには、次の設定を検討してください:
```
ラベル/アイコン:
色: 白
ホバー時の色: #f5f5f5
背景:
色: 赤
境界線:
色: 赤
```
### **重要な注意事項**
* 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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-button-group.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
