# Button Group
## **Use Cases and Examples:** | Use Case | Description | Illustration Idea | | --------------------------- | ------------------------------------------------------------------------------------ | -------------------------------- | | **Brand Overflow Menu** | Dropdown menu with brand-specific actions, consolidating tasks in one place. | ![](/files/7f53sZfkLet9MN8VtC6s) | | **Button Group Icon** | Group icons representing common tasks for aesthetic and functional enhancement. | ![](/files/cRNSWTi1tIh0GH3WcyXU) | | **Modal Footer (Center)** | Center-aligned buttons in modal dialogs for primary actions. | ![](/files/egz1S60xwR0zbOXwQo3A) | | **Modal Footer (Left)** | Left-aligned buttons in modal footers for secondary or navigational actions. | ![](/files/g5FQhdylxG9JebOjrcW8) | | **Modal Footer (Right)** | Right-aligned buttons in modal footers, typically used for closing or final actions. | ![](/files/IsCKb0G9cyX9tMnk8bWe) | | **Overflow Menu** | A menu for additional options, especially useful in limited space. | ![](/files/4XDqgBlVvJI7ooXdXrWc) | | **Toolbar** | Toolbar with grouped buttons for quick access to frequently used functions. | ![](/files/bXX0Y7RFQ6Udh4HeOpzG) | | **Topbar with Back Button** | Top navigation bar in a flow, featuring a back button for easy step navigation. | ![](/files/eATTxF346f0aJVj9ADts) | {% hint style="info" %} You can find these examples in the '[Templates](/flow/component-builder/component-templates.md)' section of the Avonni Button Group Component {% endhint %} ## Changing the properties Customizing Avonni Button Group properties: * **Display buttons as a row**: Activate it to get separated buttons. * Set the **number of visible buttons**: Define how many buttons to display. * **Button information**: Input each button's label, variant, and icon. * **Button menu options**: Customize label, icon, and variant for menu buttons (useful when a specific number of visible buttons is set). * **Configure interactions**: Determine actions to be triggered when users click on a button. * **Style tab**: Customize the look and feel of each button using the Style tab. You can use these properties to create a tailored Button Group flow screen component that meets your unique requirements. ## Adding interactions Interactions define what will happen when users click on an action. You can find a list of interactions that are available [here](/flow/component-builder/interactions-panel.md). Here are the available Actions for the Button Group Component: * On **`Click`** {% hint style="danger" %} ## Important Due to limitations within Flow Builder, the Button component cannot directly access variable information from components that lack context about a specific record. When configuring interactions using record variables within a flow, ensure the components involved are contextually aware of the record. **For scenarios where context is challenging to establish, consider using the** [**Avonni Dynamic Components package**](/dynamic-components/welcome.md)**, which offers advanced capabilities for managing and passing record context across components.** {% endhint %} *** ## Output Variables The Button Group exposes output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Button Group component, and pick the output variable you need. ### Button Clicks When users click a button in the group, this variable captures which one was clicked. | Output variable | Type | What it returns | | ----------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | **Clicked Button Name** | Text (String) | The name (identifier) of the button the user clicked. Use this in a Decision element to branch your flow based on which button was selected. | > **Example:** A case triage screen shows a Button Group with "Escalate", "Assign to Me", and "Close". After the screen, a Decision element checks **Clicked Button Name** to route the flow to the appropriate logic — escalation, assignment, or closure. *** ## Specifications {% tabs %} {% tab title="🎛️ Attributes" %}
NameTypeDescription
Display As RowStringIf true the buttons are separated
Visible ButtonsStringThe number of buttons to display. If not specified, all buttons are displayed.
ButtonsStringCreate your buttons from here
LabelStringTo specify the label of a button
Icon NameStringTo add an icon on the button
VariantStringThe variant changes the appearance of the button. Accepted variants include base, neutral, brand, brand-outline, destructive, destructive-text, inverse, and success.
Menu AlignmentBooleanThe alignment of the dropdown menu
{% endtab %} {% tab title="Events" %} | Name | Description | | ------------ | ------------------------------------------- | | click | The event fired when the button is clicked. | | {% endtab %} | | {% tab title="🎨 Styling" %} #### Container | Name | Description | | ---------------- | -------------------------------------------------------- | | Background Color | The line-height property specifies the height of a line. | | Border Size | Define the font size for the text label | | Border Color | Define the font style for the text label | | Border Style | Define the font weight for the text label | | Border Radius | Define the font color for the text label | #### Label | Name | Description | | ----------- | ------------------------------------------- | | Line Height | The line-height property for the label text | | Font Size | Define the font size for the text label | | Font Style | Define the font style for the text label | | Font Weight | Define the font weight for the text label | #### Border | Name | Description | | ----- | --------------------- | | Size | Define a border size | | Style | Define a border style | #### Each Variant Style | Name | Description | | ---------------- | ----------------------------------------- | | Background Color | Define a background color for the variant | | Border Size | Define a border size for the variant | | Border Color | Define a border color for the variant | | Border Style | Define a border style for the variant | | Border Radius | Define a border radius for the variant | | {% endtab %} | | | {% endtabs %} | | --- # 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/flow/flow-components/button-group.md?ask= ``` 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.