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.
Configuration
Making Your Button Dialog Great
Add the Component: Find the Avonni Button Dialog component and drag it onto your website.
Make it Look Great: You can change the button's text (the label), color style (the variant), and any other visual details you like.
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.
Button Configuration
Label is the text displayed on the button.
Icon Name is the Lightning Design System icon displayed on the button. Icon Position places it to the left or right of the label.
Variant defines the button's appearance (brand, neutral, and so on) according to the predefined Salesforce Design System styles.
Horizontal Alignment aligns the button within its container — left, center, or right.
Stretch expands the button to fill the width of its container.
Disabled disables the button, preventing user interaction.
Alternative Text provides accessible text describing the button when it shows only an icon.
Dialog Configuration
Hide Header removes the title bar at the top of the popup box.
Size sets how big the popup box is (small, medium, or large).
Show Footer adds a section at the bottom of the popup — great for buttons like "OK" or "Cancel."
Content Pull Padding controls the space between the content inside the box and the box edges.
Styling
Controls the space around the button (Top / Bottom / Left / Right).
Color / Color Active / Color Hover: Set the button's background color for the default, active, and hover states.
Color / Color Active / Color Hover: Set the label and icon color for the default, active, and hover states.
Font Size / Font Style / Font Weight / Font Family / Line Height: Control the label typography.
Horizontal Alignment: Align the label and icon.
Color / Color Active / Color Hover: Set the border color for the default, active, and hover states.
Size / Style / Radius: Control the button border.
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.
Mis à jour
Ce contenu vous a-t-il été utile ?