> 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-cloud-de/experience-components/ax-button-dialog.md).

# AX - Schaltflächendialog

## Übersicht

**AX - Schaltflächendialog** ist eine Experience-Cloud-Komponente, die beim Klicken auf Experience-Sites-Seiten ein modales Popup öffnet und Inhalte anzeigt, ohne Benutzer von ihrer aktuellen Seite wegzuleiten.

Verwenden Sie sie, um zusätzliche Details, Videoinhalte, Bestätigungsmeldungen, Formulare oder Warnungen anzuzeigen, die als Overlay erscheinen. Platzieren Sie beliebige Experience-Cloud-Komponenten im Modal, um den Inhalt des Popups im Experience Builder zu erstellen.

Perfekt für „Mehr erfahren“-Details, Videodemonstrationen, Geschäftsbedingungen, Bestätigungsaufforderungen oder andere Inhalte, die vorübergehend über der aktuellen Seite in Ihrem Portal angezeigt werden müssen.

<figure><img src="/files/aaf25817bbc2263194a898823f6dde5e6fda3694" alt=""><figcaption></figcaption></figure>

***

## Konfigurieren des Avonni-Schaltflächendialogs

### **So machen Sie Ihren Schaltflächendialog großartig**

1. **Komponente hinzufügen:** Suchen Sie die Komponente „Avonni Button Dialog“ und ziehen Sie sie auf Ihre Website.
2. **So sieht es großartig aus:** Sie können den Text der Schaltfläche (die Beschriftung), den Farbstil (die Variante) und alle weiteren visuellen Details ändern, die Sie möchten.
3. **Klicken und erstellen:** Ein Popup-Fenster (ein Modal) wird angezeigt, wenn Sie auf die Schaltfläche klicken. Sie können allerlei coole Dinge in dieses Feld ziehen, z. B. die Avonni-Video-Komponente oder andere nette Elemente.

### **Zusätzliche Einstellungen**

* **Kopfzeile ausblenden:** Dadurch wird die Titelleiste oben im Popup-Fenster entfernt.
* **Größe:** Wählen Sie aus, wie groß oder klein das Popup-Fenster sein soll.
* **Fußzeile anzeigen:** Fügt unten im Popup einen Bereich hinzu – ideal für Schaltflächen wie „OK“ oder „Abbrechen“.
* **Innenabstand des Inhalts:** Dies steuert den Abstand zwischen dem Inhalt im Feld und den Feldrändern.

<figure><img src="/files/aa91ee31243be20b29e16399ec9a57ebe0d3de00" alt=""><figcaption></figcaption></figure>

***

## Einstellungen

{% tabs %}
{% tab title="Schaltflächenkonfiguration" %}

| Name                        | Beschreibung                                                                                                                                 |
| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| **Beschriftung**            | Auf der Schaltfläche angezeigter Text.                                                                                                       |
| **Symbolname**              | Der Lightning-Design-System-Name des Symbols, das auf der Schaltfläche angezeigt werden soll.                                                |
| **Symbolposition**          | Die Position des Symbols relativ zur Beschriftung; Optionen sind „links“ oder „rechts“.                                                      |
| **Variante**                | Definiert das Erscheinungsbild der Schaltfläche, z. B. „brand“, „neutral“ usw., gemäß den vordefinierten Stilen im Salesforce Design System. |
| **Horizontale Ausrichtung** | Richtet die Schaltfläche horizontal innerhalb ihres Containers aus; Optionen sind „links“, „zentriert“ oder „rechts“.                        |
| **Strecken**                | Bestimmt, ob sich die Schaltfläche ausdehnen soll, um die Breite ihres Containers auszufüllen.                                               |
| **Deaktiviert**             | Deaktiviert die Schaltfläche und verhindert Benutzerinteraktionen.                                                                           |
| {% endtab %}                |                                                                                                                                              |

{% tab title="Dialogkonfiguration" %}

| Name                     | Beschreibung                                                                                   |
| ------------------------ | ---------------------------------------------------------------------------------------------- |
| **Kopfzeile ausblenden** | Schaltet die Sichtbarkeit der Kopfzeile des Dialogs um.                                        |
| **Größe**                | Legt die Größe des Dialogs fest; Optionen können „`klein`', '`mittel`“ oder „`groß`.           |
| **Footer anzeigen**      | Bestimmt, ob die Fußzeile des Dialogs angezeigt wird, die Aktionsschaltflächen enthalten kann. |
| {% endtab %}             |                                                                                                |

{% tab title="🎨 Gestaltung" %}

| Name          | Beschreibung                                                            |
| ------------- | ----------------------------------------------------------------------- |
| **Header**    | Gibt die Hintergrundfarbe der Kopfzeile des Dialogs an.                 |
| **Inhalt**    | Legt die Hintergrundfarbe für den Hauptinhaltsbereich des Dialogs fest. |
| **Fußzeile**  | Definiert die Hintergrundfarbe für den Fußzeilenbereich.                |
| {% 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:

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

The question should be specific, self-contained, and written in natural language.
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.