Button Group
Last updated
Last updated
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 Case | Description | Illustration Idea |
---|---|---|
You can find these examples in the 'Templates' section of the Avonni Button Group Component
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.
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
Name | Type | Description |
---|---|---|
Name | Description |
---|---|
Name | Description |
---|---|
Name | Description |
---|---|
Name | Description |
---|---|
Name | 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
click
The event fired when the button is clicked.
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
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
Size
Define a border size
Style
Define a border style
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
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.