Button Group
Overview
The Avonni Button Group Component is a versatile tool designed for Salesforce Flow Builder, enabling users to group multiple buttons in a cohesive unit. This arrangement enhances the visual appeal and increases the functionality and efficiency of user interactions within screen flows.
Why It's Useful in Screen Flows:
The Avonni Button Group Component can streamline user navigation and actions in screen flows. Grouping related buttons simplifies the interface, making it more intuitive and user-friendly. This is particularly beneficial in complex flows, where guiding the user through steps or actions is crucial.
Use Cases and Examples:
| Use Case | Description | Illustration Idea |
|---|---|---|
Brand Overflow Menu | Dropdown menu with brand-specific actions, consolidating tasks in one place. |
|
Button Group Icon | Group icons representing common tasks for aesthetic and functional enhancement. |
|
Modal Footer (Center) | Center-aligned buttons in modal dialogs for primary actions. |
|
Modal Footer (Left) | Left-aligned buttons in modal footers for secondary or navigational actions. |
|
Modal Footer (Right) | Right-aligned buttons in modal footers, typically used for closing or final actions. |
|
Overflow Menu | A menu for additional options, especially useful in limited space. |
|
Toolbar | Toolbar with grouped buttons for quick access to frequently used functions. |
|
Topbar with Back Button | Top navigation bar in a flow, featuring a back button for easy step navigation. |
|
You can find these examples in the 'Templates' section of the Avonni Button Group Component
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.
Here are the available Actions for the Button Group Component:
On
Click
Specifications
| Name | Type | Description |
|---|---|---|
Display As Row | String | If true the buttons are separated |
Visible Buttons | String | The number of buttons to display. If not specified, all buttons are displayed. |
Buttons | String | Create your buttons from here |
Label | String | To specify the label of a button |
Icon Name | String | To add an icon on the button |
Variant | String | The variant changes the appearance of the button. Accepted variants include base, neutral, brand, brand-outline, destructive, destructive-text, inverse, and success. |
Menu Alignment | Boolean | The alignment of the dropdown menu |
Last updated