# AX - Button Group

## Overview

**AX - Button Group** is an Experience Cloud component that displays multiple related buttons together as a unified group on Experience Sites pages.

Use it to present related actions side-by-side—like "Save" and "Cancel," "Edit" and "Delete," or navigation options for different sections. Buttons stay visually connected as a single unit, making it clear they're related choices.

Perfect for form actions, record management options, tab-like navigation, or anywhere portal users need to choose between multiple related actions.

***

## Configuring the Button Group <a href="#use-cases-and-examples" id="use-cases-and-examples"></a>

Follow these steps to tailor the Avonni Button Group Component to fit your Experience Cloud site's design and functionality perfectly:

### **Key Settings**

#### **Display as row**

Enable this setting to arrange the buttons horizontally across the screen. Deactivating it will stack the buttons vertically.

#### **Visible buttons**

This setting determines the maximum number of buttons directly visible on the screen. If you have more buttons than the specified number, the remaining ones will be placed in a convenient dropdown menu.

#### **Button Menu**

* **Label:** Set the text displayed on the button that opens the dropdown menu containing additional buttons.
* **Icon Name:** On the button menu, select an appropriate icon (refer to Salesforce Lightning Design System for available icons).
* **Variant:** Choose the visual style for the button menu (e.g., 'neutral', 'brand', 'inverse').
* **Menu Alignment:** Select how the dropdown menu will be positioned relative to the button ('left' or 'right').

#### **Buttons**

* **Label:** Enter the text you want to appear on the button.
* **Icon Name:** If desired, choose an icon to be placed on the button.
* **Icon Position:** Specify if the icon should be to the 'left' or 'right' of the button label.
* **Variant:** You can select the button's appearance from the predefined styles ('neutral', 'brand', 'destructive', etc.).
* **Disabled:** Enable this setting if you want the button to start in a disabled state, preventing user interaction.
* **Hidden:** Enable this setting if you want the button to be initially hidden from view.
* **On Click Interaction:** This crucial section allows you to define what happens when a user clicks on the button. Consult the "On Click Interactions" documentation page for a comprehensive list of possible actions and configurations.

### **Important Considerations**

* Design your Button Group with a clear visual hierarchy in mind. Use the 'brand' variant to emphasize primary actions.
* Use the 'destructive' variant sparingly for actions that have significant consequences.
* Ensure that button labels are concise and accurately describe their function.
* Always thoroughly test your Button Group configuration across different devices and browsers to ensure optimal user experience.

***

## Styling Appearance <a href="#use-cases-and-examples" id="use-cases-and-examples"></a>

The Avonni Button Group Component offers comprehensive styling options to customize its appearance within your Experience Cloud site. Below is a breakdown of available styling attributes:

<details>

<summary>Label/Icon</summary>

* **color:** Sets the default text or icon color.
* **color active:** Sets the text or icon color when the button is active (clicked or focused).
* **color hover:** Sets the text or icon color when the user hovers the mouse over the button.
* **font family:** Specifies the font to be used for the button text.
* **font size:** Controls the size of the button text.
* **font style:** Sets the font style (e.g., normal, italic, oblique).
* **font weight:** Determines the boldness of the button text (e.g., normal, bold, bolder).

</details>

<details>

<summary>Background</summary>

* **color:** Sets the default background color of the button.
* **color active:** Sets the background color when the button is active.
* **color hover:** Sets the background color when the user hovers the mouse over the button.

</details>

<details>

<summary>Border</summary>

* **color:** Sets the default border color.
* **color active:** Sets the border color when the button is active.
* **color hover:** Sets the border color when the user hovers the mouse over the button.
* **size:** Controls the width of the border.
* **style:** Specifies the border style (e.g., solid, dashed, dotted).

</details>

***

### **Example Usage**

To create a button group with a red background, white text, and a subtle hover effect, consider the following configuration:

```
Label/Icon:
   color: white
   color hover: #f5f5f5 

Background:
   color: red 

Border: 
   color: red  
```

### **Important Notes**

* Use a web color picker or generator to find your desired color codes.
* Strive for consistency with your Experience Cloud site's overall design and color scheme.
* Always test your styling changes to ensure the desired visual effect and accessibility.