Button Dialog

Overview

The Avonni Button Dialog Component is a customizable interface element for Salesforce Experience Cloud that triggers a modal dialog.

This component is typically used to present additional information, prompt user input, display a video, or display a confirmation message without navigating away from the current page.

Configuring the Avonni Button Dialog

Making Your Button Dialog Awesome

1. Add the Component: Find the Avonni Button Dialog component and drag it onto your website.

2. Make it Look Great: You can change the button's text (the label), color style (the variant), and any other visual details you like.

3. Click and Create: A popup box (a modal) will appear when you click the button. You can drag all sorts of cool stuff into this box, like the Avonni Video Component or other neat things.

Extra Settings

• Hide Header: This removes the title bar at the top of the popup box.

• Size: Choose how big or small you want the popup box to be.

• Show Footer: Adds a section at the bottom of the popup – great for buttons like "OK" or "Cancel."

• Content Pull Padding: This controls the space between the stuff inside the box and the box edges.

Settings

Button Configuration

Name	Description
Label	Text displayed on the button.
Icon Name	The Lightning Design System name of the icon to be displayed on the button.
Icon Position	The position of the icon relative to the label; options are 'left' or 'right'.
Variant	Defines the button's appearance, such as 'brand', 'neutral', etc., according to predefined styles in the Salesforce Design System.
Horizontal Alignment	Aligns the button horizontally within its container; options include 'left', 'center', or 'right'.
Strech	Determines if the button should expand to fill the width of its container.
Disabled	Disables the button, preventing user interaction.

Dialog Configuration

Name	Description
Hide Header	Toggles the visibility of the dialog's header.
Size	Sets the size of the dialog; options may include 'small', 'medium', or 'large.
Show Footer	Determines whether to display the dialog's footer, which may contain action buttons.

🎨 Styling

Name	Description
Header	Specifies the background color of the dialog's header.
Content	Sets the background color for the main content area of the dialog.
Footer	Defines the background color for the footer area.