> 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 - Button Dialog
## Übersicht
**AX - Button-Dialog** ist eine Experience Cloud-Komponente, die beim Anklicken auf Experience-Sites-Seiten ein modales Popup öffnet und Inhalte anzeigt, ohne die Benutzer von ihrer aktuellen Seite wegzuleiten.
Verwenden Sie sie, um zusätzliche Details, Videoinhalte, Bestätigungsnachrichten, Formulare oder Warnungen anzuzeigen, die in einem Overlay erscheinen. Platzieren Sie beliebige Experience-Cloud-Komponenten im Modal, um den Inhalt des Popups in Experience Builder zu erstellen.
Perfekt für „Mehr erfahren“-Details, Videodemonstrationen, Geschäftsbedingungen, Bestätigungsaufforderungen oder beliebige Inhalte, die vorübergehend über der aktuellen Seite in Ihrem Portal angezeigt werden müssen.
## Konfiguration
### **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. **Lassen Sie ihn großartig aussehen:** Sie können den Text des Buttons (die Beschriftung), den Farbstil (die Variante) und alle anderen visuellen Details nach Wunsch ändern.
3. **Klicken und erstellen:** Ein Popup-Fenster (ein Modal) wird angezeigt, wenn Sie auf den Button klicken. Sie können allerlei coole Dinge in dieses Feld ziehen, wie die Avonni Video-Komponente oder andere nette Dinge.
### Button-Konfiguration
**Beschriftung** ist der auf dem Button angezeigte Text.
**Symbolname** ist das Lightning Design System-Symbol, das auf dem Button angezeigt wird. **Symbolposition** platziert es auf die `links` oder `rechts` der Beschriftung.
**Variante** definiert das Erscheinungsbild des Buttons (`Marke`, `neutral` usw.) gemäß den vordefinierten Stilen des Salesforce Design System.
**Horizontale Ausrichtung** richtet den Button innerhalb seines Containers aus — `links`, `zentriert`, oder `rechts`.
**Strecken** erweitert den Button, um die Breite seines Containers auszufüllen.
**Deaktiviert** deaktiviert den Button und verhindert Benutzerinteraktionen.
**Alternativtext** stellt zugänglichen Text bereit, der den Button beschreibt, wenn er nur ein Symbol anzeigt.
### Dialog-Konfiguration
**Kopfzeile ausblenden** entfernt die Titelleiste oben im Popup-Fenster.
**Kopfzeile** legt den Text fest, der in dieser Titelleiste angezeigt wird. Er wird nur angezeigt, solange **Kopfzeile ausblenden** deaktiviert ist.
**Größe** legt fest, wie groß das Popup-Fenster ist: `x-klein`, `klein`, `mittel`, oder `groß`. Standardmäßig `mittel`.
**Fußzeile anzeigen** fügt am unteren Rand des Popups einen Abschnitt hinzu — ideal für Buttons wie „OK“ oder „Abbrechen.“
**Content-Pull-Abstand** steuert den Abstand zwischen dem Inhalt im Feld und den Feldrändern. Im Dialog ist es standardmäßig aktiviert, sodass der Inhalt bündig an den Rändern liegt, bis Sie es deaktivieren.
## Gestaltung
{% tabs %}
{% tab title="Abstände" %}
Steuert den Abstand um den Button herum (Oben / Unten / Links / Rechts).
{% endtab %}
{% tab title="Hintergrund" %}
* **Farbe / Farbe aktiv / Farbe beim Darüberfahren:** Legen Sie die Hintergrundfarbe des Buttons für den Standard-, Aktiv- und Hover-Zustand fest.
{% endtab %}
{% tab title="Beschriftung/Symbol" %}
* **Farbe / Farbe aktiv / Farbe beim Darüberfahren:** Legen Sie die Farbe von Beschriftung und Symbol für den Standard-, Aktiv- und Hover-Zustand fest.
* **Schriftgröße / Schriftstil / Schriftstärke / Schriftfamilie / Zeilenhöhe:** Steuern Sie die Typografie der Beschriftung.
* **Horizontale Ausrichtung:** Richten Sie Beschriftung und Symbol aus.
{% endtab %}
{% tab title="Rahmen" %}
* **Farbe / Farbe aktiv / Farbe beim Darüberfahren:** Legen Sie die Rahmenfarbe für den Standard-, Aktiv- und Hover-Zustand fest.
* **Größe / Stil / Radius:** Steuern Sie den Rahmen des Buttons.
{% 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** | 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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-button-dialog.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
.gif?alt=media)
