> 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 - Schaltfläche ## Übersicht **AX - Schaltfläche** ist eine Experience-Cloud-Komponente, die anklickbare Schaltflächen auf Seiten von Experience Sites erstellt, um Aktionen wie Navigation, Formularübermittlungen, Datensatz-Erstellung oder das Öffnen von Modals auszulösen. Verwenden Sie sie, um benutzerdefinierte Call-to-Actions hinzuzufügen, Formulare abzusenden, zu bestimmten Seiten zu navigieren, Datensätze zu erstellen oder Flows auszulösen. Konfigurieren Sie die Beschriftung, das Design, das Symbol und die Aktion der Schaltfläche im Experience Builder ohne Code. Perfekt für Portal-CTAs, benutzerdefinierte Navigation, „Kontaktieren Sie uns“-Aktionen, Workflows zur Datensatz-Erstellung oder jede Benutzerinteraktion, die eine klar erkennbare, markenkonforme Schaltfläche benötigt. ## Konfiguration Nachdem Sie AX - Schaltfläche 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)). ### Erscheinungsbild der Schaltfläche Diese Einstellungen steuern, wie Ihre Schaltfläche auf der Seite aussieht. **Bezeichnung** ist der Text, der auf der Schaltfläche angezeigt wird. Halten Sie ihn prägnant und handlungsorientiert (z. B. „Anfrage senden“, „Details anzeigen“, „Kontaktieren Sie uns“). **Symbolname** fügt neben der Beschriftung ein Symbol hinzu, damit Benutzer die Aktion schnell verstehen. Wählen Sie aus Salesforces Symbolbibliothek – gängige Optionen sind `utility:download` für Downloads oder `utility:email` für Kontaktaktionen. **Icon-Position** platziert das Symbol `links` oder `rechts` links von der Beschriftung; links eignet sich in den meisten Fällen gut, während rechts auf eine Vorwärtsnavigation hinweisen kann. **Variante** ist der visuelle Stil der Schaltfläche: `Basis`, `neutral`, `Marke`, `brand-outline`, `border`, `border-filled`, `border-inverse`, `bare`, `bare-inverse`, `invertiert`, `container`, `Erfolg`, `destructive`, oder `destructive-text`. Wählen Sie eine Option, die zur Bedeutung der Aktion und zur Designsprache der Seite passt. **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 gut zu Formularschaltflächen passt. **Strecken** dehnt die Schaltfläche auf die volle Breite ihres Containers aus – verwenden Sie dies für auffällige 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, z. B. eine „Senden“-Schaltfläche, bei der Pflichtfelder noch ausgefüllt werden müssen. **Titel** legt den Tooltip-Text fest, der beim Überfahren der Schaltfläche mit der Maus angezeigt wird, und **Alternativtext** stellt barrierefreien Text bereit, der die Schaltfläche beschreibt, wenn sie nur ein Symbol anzeigt. **CMS-Dokument-Download** und **Dokument-URL oder Ausdrucks-Download** veranlassen die Schaltfläche, beim Klicken eine Datei herunterzuladen – verweisen Sie auf ein CMS-Dokument oder geben Sie eine direkte URL an, anstatt eine Interaktion auszulösen. ## Interaktionen Die **Verknüpfen mit** die Einstellung bestimmt, was passiert, wenn Benutzer auf die Schaltfläche klicken. Wählen Sie den Aktionstyp, der zu Ihrem Ziel passt.
### [Toast anzeigen](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/show-toast.md) Zeigt eine kurze Benachrichtigung 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 Rückmeldung, 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“ oder Links zu externen Ressourcen. Sie können zu Standardseiten, Datensatzseiten oder benutzerdefinierten URLs navigieren. ### [Alarm-Modalfenster ö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 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, der Benutzer auffordert, ihre Aktion zu bestätigen oder abzubrechen. Wann verwenden: Aktionen mit Konsequenzen, die nicht rückgängig gemacht werden können, wie das Löschen eines Datensatzes, das Abbrechen einer Übermittlung oder das Entziehen von Zugriff. Der Dialog gibt Benutzern die Möglichkeit, vor dem Fortfahren noch einmal nachzudenken. ### [Flow-Dialog öffnen](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/open-flow-dialog.md) Startet einen Salesforce Flow in einem modalen Popup-Fenster. 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 verbinden Sie ihn dann mit der Schaltfläche – der Flow läuft im Modal, ohne die aktuelle Seite zu verlassen ## Styling Passen Sie das Erscheinungsbild der Schaltfläche über die **Stil** Bereich des Eigenschaftseditors an. {% tabs %} {% tab title="Abstand" %} Steuert den Abstand um die Schaltfläche in jede Richtung (oben, unten, links, rechts). Verwenden Sie diese Optionen, um Ihre Schaltflächen präzise zu positionieren, Überlappungen mit anderen Elementen zu vermeiden und Luft zu schaffen. {% endtab %} {% tab title="Beschriftung/Symbol" %} * **Farbe:** Die Standardfarbe des Schaltflächentexts oder Symbols. * **Aktivfarbe:** Die Farbe, in die sich Text/Symbol ändert, wenn die Schaltfläche geklickt oder angetippt wird. * **Hover-Farbe:** Die Farbe, in die 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 Beschriftung der Schaltfläche verwendet wird. Stellen Sie sicher, dass sie zum Gesamtdesign Ihrer Website passt und gut lesbar ist. * **Schriftgröße:** Steuert die Größe des Beschriftungstexts. Passen Sie sie bei Bedarf für Lesbarkeit und Hervorhebung an. * **Schriftstil:** Legt den Schriftstil fest, z. B. normal, kursiv oder schräg. Sparsam für besondere Hervorhebung verwenden. * **Schriftstärke:** Bestimmt die Fettheit des Textes. Erwägen Sie unterschiedliche Schriftstärken, um primäre und sekundäre Schaltflächen zu unterscheiden. {% endtab %} {% tab title="Hintergrund" %} * **Hintergrundfarbe:** Die Standardfarbe des Schaltflächenhintergrunds. * **Aktive Hintergrundfarbe:** Die Hintergrundfarbe der Schaltfläche beim Klicken oder Antippen. * **Hover-Hintergrundfarbe:** Die Hintergrundfarbe, wenn der Benutzer mit der Maus über die Schaltfläche fährt. {% endtab %} {% tab title="Rahmen" %} * **Rahmenfarbe:** Die Farbe des Schaltflächenrahmens. * **Aktive Rahmenfarbe:** Die Rahmenfarbe, wenn die Schaltfläche aktiv ist. * **Hover-Rahmenfarbe:** 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 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.