# Button Group

The Button Group component allows you to combine multiple buttons into a cohesive unit. It organizes and presents related actions in a visually appealing and user-friendly manner.

## Setting Up **Your Button Group**

### **Step 1: Enter Buttons Info:**

* **Start by adding the buttons that will make up your group.** For each button, you can customize:
  * **Label:** The text displayed on the button.
  * **Icon Name:** Choose an icon to accompany the label (optional).
  * **Variant:** Select a visual style for the button (e.g., base, neutral, brand, destructive).
  * **And more:** Explore the button properties to customize its appearance and behavior further.

### **Step 2: Display as a Row (Optional):**

* **Control the arrangement of your buttons.** By default, buttons in a group are stacked vertically. Enable the "Display as a Row" toggle to arrange them horizontally.

### **Step 3: Button Menu (Optional):**

* **Manage button visibility and optimize space.** If you have many buttons, you can use the "Button Menu" feature to create a dropdown menu that contains additional buttons. This helps keep your interface clean and organized while providing access to all available actions.
  * **Customize the Menu Button:** Configure the label, icon, and button variant that triggers the dropdown menu.
  * **Control Visible Buttons:** Specify the number of buttons that should be visible by default. Any remaining buttons will be placed in the dropdown menu.

## **Why Use the Button Group Component?**

* **Organize Actions:** Group related actions together for a more intuitive user experience.
* **Improve Visual Appeal:** Present buttons in a visually appealing and organized manner.
* **Optimize Space:** Use the menu to manage many buttons without cluttering the interface.
* **Enhance Consistency:** Maintain a consistent style and layout for buttons across your application.

## **Example Use Cases**

* **Toolbar:** Create a toolbar with buttons for common actions like "New," "Edit," "Delete," and "Save."
* **Navigation:** Group navigation buttons together for easy access to different sections of your application.
* **Form Actions:** Combine "Submit" and "Cancel" buttons in a visually cohesive unit.
* **Workflow Actions:** Present a set of actions related to a specific workflow or process.

By effectively using the Button Group component, you can create user-friendly interfaces that streamline interactions and guide users towards desired actions


---

# Agent Instructions: 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:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/button-group.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.