> 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 - Button-Dialog** ist eine Experience-Cloud-Komponente, die beim Klicken auf Experience-Sites-Seiten ein modales Popup öffnet und Inhalte anzeigt, ohne Nutzer von ihrer aktuellen Seite wegzunavigieren.

Verwenden Sie sie, um zusätzliche Details, Videoinhalte, Bestätigungsnachrichten, 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 „Weitere Informationen“-Details, Videodemonstrationen, Geschäftsbedingungen, Bestätigungsaufforderungen oder alle Inhalte, die vorübergehend über der aktuellen Seite in Ihrem Portal erscheinen müssen.

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

## Konfiguration

### **So wird Ihr Button-Dialog großartig**

1. **Komponente hinzufügen:** Suchen Sie die Avonni Button Dialog-Komponente und ziehen Sie sie auf Ihre Website.
2. **So sieht er großartig aus:** Sie können den Text der Schaltfläche (die Beschriftung), den Farbstil (die Variante) und alle anderen 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 alle möglichen coolen Dinge in dieses Feld ziehen, wie die Avonni Video-Komponente oder andere nette Dinge.

### Button-Konfiguration

**Bezeichnung** ist der auf der Schaltfläche angezeigte Text.

**Symbolname** ist das Lightning Design System-Symbol, das auf der Schaltfläche angezeigt wird. **Icon-Position** platziert es auf der `links` oder `rechts` der Beschriftung.

**Variante** definiert das Erscheinungsbild der Schaltfläche (`Marke`, `neutral`, und so weiter) gemäß den vordefinierten Stilen des Salesforce Design System.

**Horizontale Ausrichtung** richtet die Schaltfläche innerhalb ihres Containers aus — `links`, `zentriert`, oder `rechts`.

**Strecken** dehnt die Schaltfläche aus, sodass sie die gesamte Breite ihres Containers einnimmt.

**Deaktiviert** deaktiviert die Schaltfläche und verhindert die Benutzerinteraktion.

**Alternativtext** stellt barrierefreien Text bereit, der die Schaltfläche beschreibt, wenn sie nur ein Symbol anzeigt.

### Dialog-Konfiguration

**Kopfzeile ausblenden** entfernt die Titelleiste oben im Popup-Fenster.

**Größe** legt fest, wie groß das Popup-Fenster ist (`klein`, `mittel`, oder `groß`).

**Fußzeile anzeigen** fügt unten im Popup einen Abschnitt hinzu – ideal für Schaltflächen wie „OK“ oder „Abbrechen“.

**Innenabstand des Inhalts** steuert den Abstand zwischen dem Inhalt im Feld und den Feldrändern.

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

## Styling

{% tabs %}
{% tab title="Abstand" %}
Steuert den Abstand um die Schaltfläche herum (Oben / Unten / Links / Rechts).
{% endtab %}

{% tab title="Hintergrund" %}

* **Farbe / Aktive Farbe / Hover-Farbe:** Legt die Hintergrundfarbe der Schaltfläche für den Standard-, Aktiv- und Hover-Zustand fest.
  {% endtab %}

{% tab title="Beschriftung/Symbol" %}

* **Farbe / Aktive Farbe / Hover-Farbe:** Legt die Farbe der Beschriftung und des Symbols für den Standard-, Aktiv- und Hover-Zustand fest.
* **Schriftgröße / Schriftstil / Schriftschnitt / Schriftfamilie / Zeilenhöhe:** Steuert die Typografie der Beschriftung.
* **Horizontale Ausrichtung:** Richtet die Beschriftung und das Symbol aus.
  {% endtab %}

{% tab title="Rahmen" %}

* **Farbe / Aktive Farbe / Hover-Farbe:** Legt die Rahmenfarbe für den Standard-, Aktiv- und Hover-Zustand fest.
* **Größe / Stil / Radius:** Steuert den Schaltflächenrahmen.
  {% endtab %}

{% tab title="Dialog-Hintergrundfarbe" %}

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