# AX - Schaltflächendialog

## Überblick

**AX - Button-Dialog** 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 wegzunavigieren.

Verwenden Sie sie, um zusätzliche Details, Videoinhalte, Bestätigungsnachrichten, Formulare oder Warnungen in einer Überlagerung anzuzeigen. Platzieren Sie beliebige Experience-Cloud-Komponenten innerhalb des Modals, um den Inhalt des Popups im Experience Builder zu erstellen.

Perfekt für „Mehr erfahren“-Details, Video-Demonstrationen, Geschäftsbedingungen, Bestätigungsaufforderungen oder jegliche Inhalte, die vorübergehend über der aktuellen Seite in Ihrem Portal erscheinen sollen.

<figure><img src="https://4175360472-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>

***

## Konfiguration des Avonni Button-Dialogs

### **So machen Sie Ihren Button-Dialog großartig**

1. **Komponente hinzufügen:** Suchen Sie die Avonni Button Dialog-Komponente und ziehen Sie sie auf Ihre Website.
2. **Optisch ansprechend gestalten:** Sie können den Text des Buttons (das Label), den Farbstil (die Variante) und alle anderen visuellen Details nach Belieben ändern.
3. **Klicken und erstellen:** Beim Klicken auf den Button erscheint ein Popup-Fenster (ein Modal). Sie können allerlei coole Inhalte in dieses Fenster ziehen, wie die Avonni Video-Komponente oder andere nützliche Elemente.

### **Zusätzliche Einstellungen**

* **Header ausblenden:** Dies entfernt die Titelleiste oben im Popup-Fenster.
* **Größe:** Wählen Sie, wie groß oder klein das Popup-Fenster sein soll.
* **Footer anzeigen:** Fügt einen Bereich am unteren Rand des Popups hinzu – ideal für Buttons wie „OK“ oder „Abbrechen“.&#x20;
* **Innenabstand Inhalt:** Dies steuert den Abstand zwischen den Inhalten im Inneren des Fensters und den Rändern des Fensters.

<figure><img src="https://4175360472-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>

***

## Einstellungen

{% tabs %}
{% tab title="Button-Konfiguration" %}

| Name                        | Beschreibung                                                                                                                        |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| **Beschriftung**            | Auf dem Button angezeigter Text.                                                                                                    |
| **Icon-Name**               | Der Lightning Design System-Name des Symbols, das auf dem Button angezeigt werden soll.                                             |
| **Icon-Position**           | Die Position des Symbols relativ zur Beschriftung; Optionen sind ‚links‘ oder ‚rechts‘.                                             |
| **Variante**                | Definiert das Erscheinungsbild des Buttons, z. B. ‚brand‘, ‚neutral‘ usw., gemäß vordefinierten Stilen im Salesforce Design System. |
| **Horizontale Ausrichtung** | Richtet den Button horizontal innerhalb seines Containers aus; Optionen sind beispielsweise ‚links‘, ‚zentriert‘ oder ‚rechts‘.     |
| **Dehnen**                  | Legt fest, ob der Button sich ausdehnen soll, um die Breite seines Containers auszufüllen.                                          |
| **Deaktiviert**             | Deaktiviert den Button und verhindert Benutzerinteraktion.                                                                          |
| {% endtab %}                |                                                                                                                                     |

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

| Name                  | Beschreibung                                                                                        |
| --------------------- | --------------------------------------------------------------------------------------------------- |
| **Header ausblenden** | Schaltet die Sichtbarkeit des Dialog-Headers um.                                                    |
| **Größe**             | Legt die Größe des Dialogs fest; Optionen können ‚`klein`', '`mittel`‘ oder ‘`groß`.                |
| **Footer anzeigen**   | Bestimmt, ob der Footer des Dialogs angezeigt werden soll, der Aktionsschaltflächen enthalten kann. |

{% endtab %}

{% tab title="🎨 Styling" %}

| Name       | Beschreibung                                                            |
| ---------- | ----------------------------------------------------------------------- |
| **Header** | Legt die Hintergrundfarbe des Dialog-Headers fest.                      |
| **Inhalt** | Legt die Hintergrundfarbe für den Hauptinhaltsbereich des Dialogs fest. |
| **Footer** | Definiert die Hintergrundfarbe für den Footer-Bereich.                  |

{% endtab %}
{% endtabs %}


---

# Agent Instructions: 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-schaltflachendialog.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.