> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-button-dialog.md).

# 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%2Fgit-blob-0c9aa549e4a11be21eec4145be831d232bc830ac%2F2023-11-07_15-55-13%20(1).gif?alt=media" alt=""><figcaption></figcaption></figure>

## Configuration

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

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

**Header** sets the text shown in that title bar. It appears only while **Hide Header** is off.

**Size** sets how big the popup box is: `x-small`, `small`, `medium`, or `large`. Defaults to `medium`.

**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. On the dialog it is on by default, so content sits flush against the edges until you turn it off.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-77f422bad520c383aba24f26c7aedd53b9d23b7d%2F2024-03-16_12-31-56.png?alt=media" alt=""><figcaption></figcaption></figure>

## Styling

{% tabs %}
{% tab title="Spacing" %}
Controls the space around the button (Top / Bottom / Left / Right).
{% endtab %}

{% tab title="Background" %}

* **Color / Color Active / Color Hover:** Set the button's background color for the default, active, and hover states.
  {% endtab %}

{% tab title="Label/Icon" %}

* **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.
  {% endtab %}

{% tab title="Border" %}

* **Color / Color Active / Color Hover:** Set the border color for the default, active, and hover states.
* **Size / Style / Radius:** Control the button border.
  {% endtab %}

{% tab title="Dialog Background Color" %}

| 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 %} |                                                                    |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-button-dialog.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.