Button Group

The Avonni Button Group component provides a cohesive way to group buttons in Salesforce Flow screens, improving usability and visual clarity.

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

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, which offers advanced capabilities for managing and passing record context across components.

Specifications

🎛️ Attributes

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

Events

🎨 Styling