Button Group

Overview

The Avonni Button Group Component elevates user interactions within Salesforce Experience Cloud sites by allowing you to group multiple buttons. This component streamlines site navigation and simplifies actions, creating a more polished and intuitive user experience.

Configuring the Button Group

Follow these steps to tailor the Avonni Button Group Component to fit your Experience Cloud site's design and functionality perfectly:

Key Settings

Display as row

Enable this setting to arrange the buttons horizontally across the screen. Deactivating it will stack the buttons vertically.

Visible buttons

This setting determines the maximum number of buttons directly visible on the screen. If you have more buttons than the specified number, the remaining ones will be placed in a convenient dropdown menu.

Button Menu

• Label: Set the text displayed on the button that opens the dropdown menu containing additional buttons.

• Icon Name: On the button menu, select an appropriate icon (refer to Salesforce Lightning Design System for available icons).

• Variant: Choose the visual style for the button menu (e.g., 'neutral', 'brand', 'inverse').

• Menu Alignment: Select how the dropdown menu will be positioned relative to the button ('left' or 'right').

Buttons

• Label: Enter the text you want to appear on the button.

• Icon Name: If desired, choose an icon to be placed on the button.

• Icon Position: Specify if the icon should be to the 'left' or 'right' of the button label.

• Variant: You can select the button's appearance from the predefined styles ('neutral', 'brand', 'destructive', etc.).

• Disabled: Enable this setting if you want the button to start in a disabled state, preventing user interaction.

• Hidden: Enable this setting if you want the button to be initially hidden from view.

• On Click Interaction: This crucial section allows you to define what happens when a user clicks on the button. Consult the "On Click Interactions" documentation page for a comprehensive list of possible actions and configurations.

Important Considerations

• Design your Button Group with a clear visual hierarchy in mind. Use the 'brand' variant to emphasize primary actions.

• Use the 'destructive' variant sparingly for actions that have significant consequences.

• Ensure that button labels are concise and accurately describe their function.

• Always thoroughly test your Button Group configuration across different devices and browsers to ensure optimal user experience.

Styling Appearance

The Avonni Button Group Component offers comprehensive styling options to customize its appearance within your Experience Cloud site. Below is a breakdown of available styling attributes:

Label/Icon

• color: Sets the default text or icon color.

• color active: Sets the text or icon color when the button is active (clicked or focused).

• color hover: Sets the text or icon color when the user hovers the mouse over the button.

• font family: Specifies the font to be used for the button text.

• font size: Controls the size of the button text.

• font style: Sets the font style (e.g., normal, italic, oblique).

• font weight: Determines the boldness of the button text (e.g., normal, bold, bolder).

Background

• color: Sets the default background color of the button.

• color active: Sets the background color when the button is active.

• color hover: Sets the background color when the user hovers the mouse over the button.

Border

• color: Sets the default border color.

• color active: Sets the border color when the button is active.

• color hover: Sets the border color when the user hovers the mouse over the button.

• size: Controls the width of the border.

• style: Specifies the border style (e.g., solid, dashed, dotted).

Example Usage

To create a button group with a red background, white text, and a subtle hover effect, consider the following configuration:

Label/Icon:
   color: white
   color hover: #f5f5f5 

Background:
   color: red 

Border: 
   color: red  

Important Notes

• Use a web color picker or generator to find your desired color codes.

• Strive for consistency with your Experience Cloud site's overall design and color scheme.

• Always test your styling changes to ensure the desired visual effect and accessibility.