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

NameDescription

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.

Last updated