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

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

Name	Description
click	The event fired when the button is clicked.

🎨 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