YouTube ChannelContact SupportJoin The Community

AX - Button Dialog

Overview

AX - Button Dialog is an Experience Cloud component that opens a modal popup when clicked on Experience Sites pages, displaying content without navigating users away from their current page.

Use it to show additional details, video content, confirmation messages, forms, or warnings that appear in an overlay. Place any Experience Cloud components inside the modal to build the popup's content in Experience Builder.

Perfect for "Learn More" details, video demonstrations, terms and conditions, confirmation prompts, or any content that needs to appear temporarily over the current page in your portal.

Configuring the Avonni Button Dialog

Making Your Button Dialog Great

  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

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.

Last updated

Was this helpful?