# 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.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FHuw6jLzTv5LMkDyS3Xla%2F2023-11-07_15-55-13%20(1).gif?alt=media&#x26;token=688f18fe-8276-4044-b8b6-fd68f4f509cb" alt=""><figcaption></figcaption></figure>

***

## 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.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F6lPzeg4VxJc8x4Oi8oea%2F2024-03-16_12-31-56.png?alt=media&#x26;token=ece654e2-58a4-4856-9f29-cb563de6f91a" alt=""><figcaption></figcaption></figure>

***

## Settings

{% tabs %}
{% tab title="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.                                                                                  |
| {% endtab %}             |                                                                                                                                    |

{% tab title="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. |

{% endtab %}

{% tab title="🎨 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.                  |

{% endtab %}
{% endtabs %}