> 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, Formulareinsendungen, das Erstellen von Datensätzen oder das Öffnen von Modalen auszulösen. Verwenden Sie sie, um benutzerdefinierte Call-to-Actions hinzuzufügen, Formulare zu senden, zu bestimmten Seiten zu navigieren, Datensätze zu erstellen oder Flows auszulösen. Konfigurieren Sie die Beschriftung, das Styling, das Symbol und die Aktion der Schaltfläche im Experience Builder – ganz ohne Code. Ideal für Portal-CTAs, benutzerdefinierte Navigation, „Kontaktieren Sie uns“-Aktionen, Workflows zur Datensatz-Erstellung oder jede Benutzerinteraktion, die eine klare, gebrandete Schaltfläche erfordert. *** ## **Ihre Schaltfläche einrichten** Nachdem Sie AX - Button in Experience Builder auf Ihre Seite gezogen haben, konfigurieren Sie zwei Hauptsachen: wie die Schaltfläche aussieht und was passiert, wenn Benutzer darauf klicken. ### **Aussehen der Schaltfläche** Diese Einstellungen steuern, wie Ihre Schaltfläche auf der Seite aussieht. **Beschriftung** – Der auf der Schaltfläche angezeigte Text. Halten Sie ihn kurz und handlungsorientiert (z. B. „Anfrage senden“, „Details anzeigen“, „Kontaktieren Sie uns“). **Symbolname** – Fügen Sie neben der Beschriftung ein Symbol hinzu, damit Benutzer die Aktion schnell verstehen. Wählen Sie aus der Symbolbibliothek von Salesforce – gängige Optionen sind „utility:download“ für Downloads oder „utility:email“ für Kontaktaktionen. **Symbolposition** – Platzieren Sie das Symbol links oder rechts neben der Beschriftung. Links funktioniert in den meisten Fällen gut, während rechts eine Vorwärtsnavigation anzeigen kann. **Variante** – Der visuelle Stil der Schaltfläche. Zu den Optionen gehören typischerweise primär (fett, aufmerksamkeitsstark), sekundär (dezent) oder destruktiv (rot, für Löschaktionen). Wählen Sie je nach Wichtigkeit der Aktion. **Horizontale Ausrichtung** – Positionieren Sie die Schaltfläche innerhalb ihres Containers – links, zentriert oder rechts. Zentrierte Ausrichtung eignet sich gut für eigenständige CTAs, während linke Ausrichtung für Formularschaltflächen passt. **Strecken** – Wenn aktiviert, dehnt sich die Schaltfläche aus und füllt die volle Breite ihres Containers. Verwenden Sie dies für prominente CTAs oder wenn die Schaltfläche die Breite der darüberliegenden Formularfelder übernehmen soll. **Deaktiviert** – Verhindert, dass Benutzer auf die Schaltfläche klicken. Verwenden Sie dies, wenn eine Aktion noch nicht verfügbar ist – etwa um eine „Senden“-Schaltfläche zu deaktivieren, bis die erforderlichen Felder ausgefüllt sind ### **Aktionen der Schaltfläche (Verknüpfen mit)** Die **Verknüpfen mit** Die Einstellung bestimmt, was passiert, wenn Benutzer auf die Schaltfläche klicken. Wählen Sie den Aktionstyp, der zu Ihrem Vorhaben passt.
[**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 einigen 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: „Mehr erfahren“-Schaltflächen, die zu Detailseiten führen, Navigation „Zurück zur Startseite“ oder Links zu externen Ressourcen. Sie können zu Standardseiten, Datensatzseiten oder benutzerdefinierten URLs navigieren. [**Warn-Modal öffnen**](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/open-alert-modal.md) Öffnet ein Popup-Fenster mit einer Nachricht, die Benutzer bestätigen müssen, bevor sie fortfahren. Wann verwenden: Wichtige Hinweise, die Benutzer lesen müssen, wie Geschäftsbedingungen, 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, in dem Benutzer ihre Aktion bestätigen oder abbrechen können. 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 Zugriffen. Der Dialog gibt Benutzern die Möglichkeit, ihre Entscheidung vor dem Fortfahren zu überdenken. [**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 Support-Falls, das Ausfüllen einer Umfrage, das Aktualisieren von Kontoinformationen oder jeder geführte Workflow. Erstellen Sie den Flow im Flow Builder und verknüpfen Sie ihn dann mit der Schaltfläche – der Flow wird innerhalb des Modals ausgeführt, ohne von der aktuellen Seite wegzunavigieren *** ## Spezifikationen {% tabs %} {% tab title="Eigenschaften" %} | Name | Beschreibung | Verwendung | | --------------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Beschriftung** | Definieren Sie den auf der Schaltfläche angezeigten Text. | Geben Sie eine prägnante, klare Beschriftung ein, die dem Benutzer die Aktion der Schaltfläche anzeigt. | | **Symbolname** | Wählen Sie ein Symbol aus, das auf der Schaltfläche angezeigt werden soll. | Wählen Sie ein passendes Symbol, das die Aktion der Schaltfläche visuell darstellt und das Verständnis des Benutzers verbessert. | | **Symbolposition** | Bestimmen Sie die Position des Symbols innerhalb der Schaltfläche. | Wählen Sie eine Position, die die Schaltfläche visuell ausbalanciert und zur Gestaltungsrichtung Ihrer Webseite passt. | | **Variante** | Wählen Sie eine vordefinierte Stilvariante für die Schaltfläche. | Wählen Sie eine Variante, die zum Kontext der Aktion der Schaltfläche und zur gesamten Designsprache der Webseite passt. | | **Horizontale Ausrichtung** | Definieren Sie die horizontale Ausrichtung der Schaltfläche innerhalb ihres Containers. | Richten Sie die Schaltfläche aus, um visuelle Harmonie zu erzielen und die Layout-Anforderungen der Webseite zu erfüllen. | | **Strecken** | Bestimmen Sie, ob sich die Schaltfläche ausdehnen soll, um ihren Container zu füllen. | Aktivieren Sie diese Option, damit sich die Schaltfläche horizontal ausdehnt und den verfügbaren Platz in ihrem Container ausfüllt. | | **Deaktiviert** | Steuern Sie den aktiven oder deaktivierten Zustand der Schaltfläche. | Deaktivieren Sie die Schaltfläche, um Benutzerinteraktionen zu verhindern; nützlich, wenn eine bestimmte Aktion nicht anwendbar ist oder vorübergehend verhindert werden soll. | | {% endtab %} | | | {% tab title="Aussehen" %} ### **Abstände (oben, unten, links, rechts)** * **Margin oben, Margin unten, Margin links, Margin rechts:** Diese steuern den Abstand um die Schaltfläche in jede Richtung. Verwenden Sie sie, um Ihre Schaltflächen präzise zu positionieren, Überlappungen mit anderen Elementen zu vermeiden und etwas Freiraum zu schaffen. ### **Beschriftung/Symbol** * **Farbe:** Die Standardfarbe des Texts oder Symbols der Schaltfläche. * **Farbe aktiv:** Die Farbe, in die sich der Text/das Symbol ändert, wenn die Schaltfläche geklickt oder angetippt wird. * **Farbe beim Darüberfahren:** Die Farbe, in die sich der Text/das Symbol ändert, wenn der Benutzer mit der Maus über die Schaltfläche fährt. * **Schriftart:** 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 Schriftgröße der Beschriftung. Passen Sie sie bei Bedarf für Lesbarkeit und Hervorhebung an. * **Schriftstil:** Legt den Schriftstil fest, z. B. normal, kursiv oder schräg. Sparsam verwenden, um etwas besonders zu betonen. * **Schriftgewicht:** Legt die Schriftstärke fest. Erwägen Sie unterschiedliche Schriftschnitte, um primäre und sekundäre Schaltflächen zu unterscheiden. ### **Hintergrund** * **Hintergrundfarbe:** Die Standardfarbe des Hintergrunds der Schaltfläche. * **Hintergrundfarbe aktiv:** Die Hintergrundfarbe der Schaltfläche, wenn sie geklickt oder angetippt wird. * **Hintergrundfarbe beim Darüberfahren:** Die Hintergrundfarbe, wenn der Benutzer mit der Maus über die Schaltfläche fährt. ### **Rahmen** * **Rahmenfarbe:** Die Farbe des Rahmens der Schaltfläche. * **Rahmenfarbe aktiv:** Die Rahmenfarbe, wenn die Schaltfläche aktiv ist. * **Rahmenfarbe beim Darüberfahren:** 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, runderen 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 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.md?ask=&goal= ``` `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.