Button Group


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 CaseDescriptionIllustration 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 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



Display As Row


If true the buttons are separated

Visible Buttons


The number of buttons to display. If not specified, all buttons are displayed.



Create your buttons from here



To specify the label of a button

Icon Name


To add an icon on the button



The variant changes the appearance of the button. Accepted variants include base, neutral, brand, brand-outline, destructive, destructive-text, inverse, and success.

Menu Alignment


The alignment of the dropdown menu

Last updated