> 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.md). # AX - Button ## Übersicht **AX - Button** ist eine Experience-Cloud-Komponente, die anklickbare Schaltflächen auf Experience-Sites-Seiten erstellt, um Aktionen wie Navigation, Formularübermittlungen, Datensatzanlage oder das Öffnen von Modals auszulösen. Verwenden Sie sie, um benutzerdefinierte Calls-to-Action hinzuzufügen, Formulare zu senden, zu bestimmten Seiten zu navigieren, Datensätze zu erstellen oder Flows auszulösen. Konfigurieren Sie Beschriftung, Stil, Symbol und Aktion der Schaltfläche im Experience Builder ganz ohne Code. Perfekt für Portal-CTAs, benutzerdefinierte Navigation, „Kontaktieren Sie uns“-Aktionen, Workflows zur Datensatzanlage oder jede Benutzerinteraktion, die eine klare, gebrandete Schaltfläche benötigt. ## Konfiguration Nachdem Sie AX - Button in Experience Builder auf Ihre Seite gezogen haben, konfigurieren Sie zwei Hauptaspekte: wie die Schaltfläche aussieht und was passiert, wenn Benutzer darauf klicken (siehe [Interaktionen](#interactions)). ### Darstellung der Schaltfläche Diese Einstellungen steuern, wie Ihre Schaltfläche auf der Seite aussieht. **Beschriftung** ist der auf der Schaltfläche angezeigte Text. Halten Sie ihn kurz und handlungsorientiert (z. B. „Anfrage senden“, „Details anzeigen“, „Kontaktieren Sie uns“). **Symbolname** fügt ein Symbol neben der Beschriftung hinzu, damit Benutzer die Aktion schnell verstehen. Wählen Sie aus der Salesforce-Symbolbibliothek — gängige Optionen sind `utility:download` für Downloads oder `utility:email` für Kontaktaktionen. **Symbolposition** platziert das Symbol `links` oder `rechts` neben der Beschriftung; links funktioniert in den meisten Fällen gut, während rechts eine Vorwärtsnavigation signalisieren kann. **Variante** ist der visuelle Stil der Schaltfläche: `Basis`, `Neutral`, `Marke`, `Marken-Umrandung`, `Rahmen`, `Gefüllter Rahmen`, `Inverser Rahmen`, `Ohne Rahmen`, `Ohne Rahmen invers`, `Invers`, `Container`, `Erfolg`, `Zerstörerisch`, oder `Zerstörerischer Text`. Wählen Sie eines, das zur Bedeutung der Aktion und zur Designsprache der Seite passt.

Elf der vierzehn Varianten auf einer hellen Seite. Die drei inversen Varianten sind für einen dunklen Hintergrund gedacht und werden hier nicht angezeigt: Auf Weiß hat Bare Inverse keinen sichtbaren Text und Border Inverse ist eine leere Umrandung.

**Horizontale Ausrichtung** positioniert die Schaltfläche innerhalb ihres Containers —`links`, `zentriert`, oder `rechts`. Zentriert eignet sich gut für eigenständige CTAs, während links für Formularschaltflächen passt. **Strecken** erweitert die Schaltfläche, sodass sie die volle Breite ihres Containers ausfüllt — verwenden Sie dies für prominente CTAs oder um die Breite der darüberliegenden Formularfelder anzugleichen. **Deaktiviert** verhindert, dass Benutzer auf die Schaltfläche klicken. Verwenden Sie dies, wenn eine Aktion noch nicht verfügbar ist, etwa eine „Senden“-Schaltfläche, auf der erforderliche Felder noch fehlen. **Titel** legt den Tooltip-Text fest, der beim Überfahren der Schaltfläche angezeigt wird, und **Alternativtext** liefert barrierefreien Text, der die Schaltfläche beschreibt, wenn sie nur ein Symbol anzeigt. **CMS-Dokument-Download** und **Dokument-URL- oder Ausdrucks-Download** lassen die Schaltfläche beim Klicken eine Datei herunterladen — verweisen Sie auf ein CMS-Dokument oder geben Sie eine direkte URL an, statt eine Interaktion auszulösen. ## Interaktionen Die **Verknüpfen mit** Einstellung bestimmt, was passiert, wenn Benutzer auf die Schaltfläche klicken, und bietet acht Aktionstypen. Wählen Sie denjenigen aus, der zu dem passt, was Sie erreichen möchten. Einer davon wird im Bedienfeld etwas länger angezeigt als in den Überschriften unten: **Bestätigungsdialog öffnen**.
### [Toast anzeigen](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/show-toast.md) Zeigt eine kurze Benachrichtigungsnachricht an, die oben auf der Seite erscheint und nach wenigen Sekunden verschwindet. Wann verwenden: Bestätigungsnachrichten wie „Änderungen gespeichert“ oder „Anfrage gesendet“, die keine Benutzeraktion erfordern. Toasts geben Feedback, ohne den Arbeitsablauf des Benutzers zu unterbrechen. ### [Navigieren](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/navigate.md) Leitet Benutzer zu einer anderen Seite weiter — entweder innerhalb Ihrer Experience Site oder zu einer externen URL. Wann verwenden: Schaltflächen wie „Mehr erfahren“, die zu Detailseiten führen, Navigation „Zur Startseite zurück“ oder Links zu externen Ressourcen. Sie können zu Standardseiten, Datensatzseiten oder benutzerdefinierten URLs navigieren. ### [Alarm-Modal öffnen](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/open-alert-modal.md) Öffnet ein Popup-Fenster mit einer Nachricht, die Benutzer vor dem Fortfahren bestätigen müssen. Wann verwenden: Wichtige Hinweise, die Benutzer lesen müssen, wie AGB, Datenschutzhinweise oder Warnungen, bevor sie mit einer Aktion fortfahren. ### [Bestätigungsdialog öffnen](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/open-confirm.md) Zeigt einen Bestätigungsdialog an, der Benutzer auffordert, ihre Aktion zu bestätigen oder abzubrechen. Wann verwenden: Aktionen mit Folgen, die nicht rückgängig gemacht werden können, wie das Löschen eines Datensatzes, das Abbrechen einer Übermittlung oder das Entfernen von Zugriffsrechten. Der Dialog gibt Benutzern die Möglichkeit, es sich vor dem Fortfahren noch einmal zu überlegen. ### [Flow-Dialog öffnen](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/open-flow-dialog.md) Startet einen Salesforce Flow in einem Popup-Modalfenster. Wann verwenden: Mehrstufige Prozesse wie das Einreichen eines Supportfalls, das Ausfüllen einer Umfrage, das Aktualisieren von Kontoinformationen oder jeder geführte Workflow. Erstellen Sie den Flow im Flow Builder und verbinden Sie ihn dann mit der Schaltfläche — der Flow läuft im Modal, ohne die aktuelle Seite zu verlassen ### [Flow ausführen](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/execute-flow.md) Führt einen automatisch gestarteten Salesforce Flow im Hintergrund aus, ohne Dialog oder Bereich. Wann verwenden: Automatisierungen nach dem Motto „anstoßen und vergessen“ hinter einer Schaltfläche — eine Anfrage protokollieren, einen Datensatz aktualisieren, eine Benachrichtigung senden. Verwenden Sie **Flow-Dialog öffnen** stattdessen, wenn der Flow Bildschirme enthält, die der Benutzer durchlaufen muss. ### [Herunterladen](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/download.md) Lädt beim Klicken auf die Schaltfläche eine Datei aus einer Salesforce-Datei, einem öffentlichen Link oder einer URL herunter. Wann verwenden: Preislisten, Kontoauszüge, Verträge oder jedes Dokument, das ein Portalbenutzer behalten muss. Bevorzugen Sie dies gegenüber der **CMS-Dokument-Download** Einstellung, wenn die Datei durch die Interaktion bestimmt wird und nicht fest auf der Schaltfläche hinterlegt ist. ### Alle Abfragen aktualisieren Führt jede Abfrage auf der Seite erneut aus, sodass die Komponenten um die Schaltfläche herum aktuelle Daten anzeigen. Wann verwenden: Nachdem ein Flow-Dialog oder ein Modal einen Datensatz geändert hat, damit der Rest der Seite aktualisiert wird, ohne dass der Benutzer die Seite neu laden muss. ## Gestaltung Passen Sie das Erscheinungsbild der Schaltfläche über die **Stil** Bereich des Eigenschaften-Editors an. {% tabs %} {% tab title="Abstände" %} Steuert den Abstand um die Schaltfläche in jede Richtung (oben, unten, links, rechts). Verwenden Sie diese Einstellungen, um Ihre Schaltflächen präzise zu positionieren, Überlappungen mit anderen Elementen zu vermeiden und mehr Freiraum zu schaffen. {% endtab %} {% tab title="Beschriftung/Symbol" %} * **Farbe:** Die Standardfarbe des Texts oder Symbols der Schaltfläche. * **Aktive Farbe:** Die Farbe, zu der sich Text/Symbol ändert, wenn die Schaltfläche geklickt oder angetippt wird. * **Hover-Farbe:** Die Farbe, zu der sich Text/Symbol ändert, wenn der Benutzer mit der Maus über die Schaltfläche fährt. * **Schriftfamilie:** Gibt die Schriftart an, die für die Textbeschriftung der Schaltfläche verwendet wird. Stellen Sie sicher, dass sie zum Gesamtdesign Ihrer Site passt und gut lesbar ist. * **Schriftgröße:** Steuert die Größe des Beschriftungstexts. Passen Sie sie bei Bedarf für bessere Lesbarkeit und Hervorhebung an. * **Schriftstil:** Legt den Stil des Texts fest, etwa normal, kursiv oder schräg. Verwenden Sie ihn sparsam zur besonderen Hervorhebung. * **Schriftstärke:** Legt die Fettstärke des Texts fest. Erwägen Sie unterschiedliche Stärken, um primäre und sekundäre Schaltflächen voneinander abzuheben. {% endtab %} {% tab title="Hintergrund" %} * **Hintergrundfarbe:** Die Standardfarbe des Hintergrunds der Schaltfläche. * **Hintergrundfarbe aktiv:** Die Hintergrundfarbe der Schaltfläche, wenn sie geklickt oder angetippt wird. * **Hintergrundfarbe Hover:** Die Hintergrundfarbe, wenn der Benutzer mit der Maus über die Schaltfläche fährt. {% endtab %} {% tab title="Rahmen" %} * **Rahmenfarbe:** Die Farbe des Rahmens der Schaltfläche. * **Rahmenfarbe aktiv:** Die Rahmenfarbe, wenn die Schaltfläche aktiv ist. * **Rahmenfarbe Hover:** Die Rahmenfarbe, wenn der Benutzer mit der Maus über die Schaltfläche fährt. * **Rahmengröße:** Die Dicke des Rahmens (in Pixeln). * **Rahmenstil:** Die Art des Rahmens: durchgezogen, gepunktet, gestrichelt usw. * **Rahmenradius:** Steuert, wie abgerundet die Ecken der Schaltfläche sind. Höhere Werte führen zu weicheren, runder wirkenden Schaltflächen {% 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.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.