LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Installation & License Management
    • Quick Start Guide
    • Learning the Basics
    • Reactive Data Components
  • Experience Components
    • 🖼️View All Components
    • Accordion
    • Accordion Section
    • Alert
    • Audio
    • Avatar
    • Avatar Group
    • Banner
    • Bar Code
    • Blockquote
    • Button
    • Button Dialog
    • Button Group
    • Button Menu
    • Calendar
    • Card
    • Chip Container
    • Container
    • Data Table
    • Feed
    • Gallery
    • Icon
    • Illustration
    • Image
    • Kanban
    • Language Selector
    • Layout
    • List
    • Map
    • Media Object
    • Metric
    • Navigation
    • Profile Card
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Publisher
    • Record Detail
    • Separator
    • Tabs
    • Text Block
    • Timeline
    • Video
  • Properties Panel
    • Appearance
    • Interactions
      • Show Toast
      • Navigate
      • Open Alert Modal
      • Open Confirm
      • Open Flow Dialog
  • Tutorials
    • General
      • Expressions for Aura Sites
      • Expressions for LWR Sites
    • Components
      • Banner
        • With Illustration and Buttons
        • With Content centered
      • Card
        • Creating a MapCard Showcase
      • Data Table
        • Configuring the Data Table to display current related record information
        • Displaying Salesforce CMS Files in a Data Table
      • Image
        • Utilizing Avonni Image Component for Before-and-After Image Comparisons
      • Layout
        • Configuring the Layout to be responsive
      • Map
        • Set up the map to show record details information
      • Profile Card
        • Set up the Profile Card to display current user information
      • Tabs
    • Interactions
      • Configure the Open Flow Dialog to open a flow by clicking a button
    • Reactive Components
      • Interactive Map
      • Linked Data Tables
      • Guide to Implementing
    • Use Cases
      • Building a record detail page header
      • Creating a MapCard Showcase
      • Creating a Grid Layout
      • Utilizing Avonni Image Component for Before-and-After Image Comparisons
  • HELP
    • How do I contact support?
    • How do I report bugs?
    • Release Notes
    • Security
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Overview
  • Configuring the Button Group
  • Key Settings
  • Important Considerations
  • Styling Appearance
  • Label/Icon
  • Background
  • Border
  • Example Usage
  • Important Notes

Was this helpful?

  1. Experience Components

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.

Last updated 11 months ago

Was this helpful?