🆕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.

Why It's Essential to Experience Cloud Sites:

  • Enhanced User Experience: Grouping related buttons together creates a cleaner, more organized site layout. This visual clarity effortlessly guides users through your site's content and actions.

  • Improved Navigation: The Button Group Component makes navigating complex sites or multi-step processes more manageable. Users can quickly identify and select the actions they want to take.

  • Customization for Design: Extensive customization options help you align the button group's appearance with your website's branding and overall aesthetic, leading to a seamless 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

  1. Display as row: Enable this setting to arrange the buttons horizontally across the screen. Deactivating it will stack the buttons vertically.

  2. 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.

  3. Button Menu:

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

    • Icon Name: Select an appropriate icon to be displayed on the button menu (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').

  4. 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: 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. Emphasize primary actions by using the 'brand' variant.

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

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

  • Always test your Button Group configuration thoroughly 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.

Last updated