> 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-group.md).

# AX - Schaltflächengruppe

## Übersicht

**AX - Button-Gruppe** ist eine Experience-Cloud-Komponente, die mehrere zusammengehörige Schaltflächen als eine einheitliche Gruppe auf Experience-Sites-Seiten anzeigt.

Verwenden Sie sie, um zusammengehörige Aktionen nebeneinander darzustellen – etwa „Speichern“ und „Abbrechen“, „Bearbeiten“ und „Löschen“ oder Navigationsoptionen für verschiedene Bereiche. Die Schaltflächen bleiben optisch als eine Einheit verbunden, sodass klar ist, dass sie zusammengehörige Auswahlmöglichkeiten sind.

Ideal für Formularaktionen, Optionen zur Datensatzverwaltung, registerartige Navigation oder überall dort, wo Portalnutzer zwischen mehreren zusammengehörigen Aktionen wählen müssen.

## Konfiguration

Befolgen Sie diese Schritte, um die Avonni-Button-Group-Komponente perfekt an das Design und die Funktionalität Ihrer Experience-Cloud-Site anzupassen:

### **Wichtige Einstellungen**

#### **Als Zeile anzeigen**

Aktivieren Sie diese Einstellung, um die Schaltflächen horizontal über den Bildschirm anzuordnen. Wenn Sie sie deaktivieren, werden die Schaltflächen vertikal gestapelt.

#### **Horizontale Ausrichtung**

Positioniert die Schaltflächengruppe innerhalb ihres Containers — `links`, `zentriert`, oder `rechts`.

#### **Sichtbare Schaltflächen**

Diese Einstellung bestimmt die maximale Anzahl von Schaltflächen, die direkt auf dem Bildschirm sichtbar sind. Wenn Sie mehr Schaltflächen als die angegebene Anzahl haben, werden die übrigen in ein praktisches Dropdown-Menü verschoben.

#### **Schaltflächenmenü**

* **Beschriftung:** Legen Sie den Text fest, der auf der Schaltfläche angezeigt wird, die das Dropdown-Menü mit zusätzlichen Schaltflächen öffnet.
* **Symbolname:** Wählen Sie im Schaltflächenmenü ein geeignetes Symbol aus (verfügbare Symbole finden Sie im Salesforce Lightning Design System).
* **Variante:** Wählen Sie den visuellen Stil für das Schaltflächenmenü (z. B. „neutral“, „brand“, „inverse“).
* **Menüausrichtung:** Wählen Sie aus, wie das Dropdown-Menü relativ zur Schaltfläche positioniert werden soll („links“ oder „rechts“).

#### **Schaltflächen**

* **Beschriftung:** Geben Sie den Text ein, der auf der Schaltfläche erscheinen soll.
* **Symbolname:** Wenn gewünscht, wählen Sie ein Symbol, das auf der Schaltfläche angezeigt werden soll.
* **Symbolposition:** Legen Sie fest, ob sich das Symbol links oder rechts von der Schaltflächenbeschriftung befinden soll.
* **Variante:** Sie können das Erscheinungsbild der Schaltfläche aus den vordefinierten Stilen („neutral“, „brand“, „destructive“ usw.) auswählen.
* **Deaktiviert:** Aktivieren Sie diese Einstellung, wenn die Schaltfläche zunächst deaktiviert sein soll, sodass keine Benutzerinteraktion möglich ist.
* **Ausgeblendet:** Aktivieren Sie diese Einstellung, wenn die Schaltfläche anfangs ausgeblendet sein soll.
* **Aktion bei Klick:** In diesem wichtigen Abschnitt können Sie festlegen, was passiert, wenn ein Benutzer auf die Schaltfläche klickt. In der Dokumentation „On Click Interactions“ finden Sie eine umfassende Liste möglicher Aktionen und Konfigurationen.

### **Wichtige Überlegungen**

* Gestalten Sie Ihre Button-Gruppe mit einer klaren visuellen Hierarchie. Verwenden Sie die Variante „brand“, um primäre Aktionen hervorzuheben.
* Verwenden Sie die Variante „destructive“ sparsam für Aktionen mit weitreichenden Konsequenzen.
* Stellen Sie sicher, dass die Schaltflächenbeschriftungen prägnant sind und ihre Funktion genau beschreiben.
* Testen Sie Ihre Button-Group-Konfiguration stets gründlich auf verschiedenen Geräten und Browsern, um ein optimales Benutzererlebnis sicherzustellen.

## Styling

Die Avonni-Button-Group-Komponente bietet umfassende Styling-Optionen, um ihr Erscheinungsbild innerhalb Ihrer Experience-Cloud-Site anzupassen. Nachfolgend finden Sie eine Übersicht der verfügbaren Styling-Attribute:

{% tabs %}
{% tab title="Außenabstand" %}
Steuert den äußeren Abstand um die Gruppe herum.
{% endtab %}

{% tab title="Innenabstand" %}
Steuert den inneren Abstand der Gruppe.
{% endtab %}

{% tab title="Beschriftung/Symbol" %}

* **Farbe:** Legt die Standardfarbe für Text oder Symbol fest.
* **Farbe aktiv:** Legt die Text- oder Symbolfarbe fest, wenn die Schaltfläche aktiv ist (geklickt oder fokussiert).
* **Farbe bei Hover:** Legt die Text- oder Symbolfarbe fest, wenn der Benutzer mit der Maus über die Schaltfläche fährt.
* **Schriftfamilie:** Gibt die Schriftart für den Schaltflächentext an.
* **Schriftgröße:** Steuert die Größe des Schaltflächentexts.
* **Schriftstil:** Legt den Schriftstil fest (z. B. normal, kursiv, schräg).
* **Schriftstärke:** Bestimmt die Fettstärke des Schaltflächentexts (z. B. normal, fett, kräftiger).
  {% endtab %}

{% tab title="Hintergrund" %}

* **Farbe:** Legt die Standard-Hintergrundfarbe der Schaltfläche fest.
* **Farbe aktiv:** Legt die Hintergrundfarbe fest, wenn die Schaltfläche aktiv ist.
* **Farbe bei Hover:** Legt die Hintergrundfarbe fest, wenn der Benutzer mit der Maus über die Schaltfläche fährt.
  {% endtab %}

{% tab title="Rahmen" %}

* **Farbe:** Legt die Standardrahmenfarbe fest.
* **Farbe aktiv:** Legt die Rahmenfarbe fest, wenn die Schaltfläche aktiv ist.
* **Farbe bei Hover:** Legt die Rahmenfarbe fest, wenn der Benutzer mit der Maus über die Schaltfläche fährt.
* **Größe:** Steuert die Breite des Rahmens.
* **Stil:** Gibt den Rahmenstil an (z. B. durchgezogen, gestrichelt, gepunktet).
  {% endtab %}
  {% endtabs %}

### **Beispielverwendung**

Um eine Schaltflächengruppe mit rotem Hintergrund, weißem Text und einem dezenten Hover-Effekt zu erstellen, können Sie die folgende Konfiguration verwenden:

```
Beschriftung/Symbol:
   Farbe: weiß
   Farbe bei Hover: #f5f5f5 

Hintergrund:
   Farbe: rot 

Rahmen: 
   Farbe: rot  
```

### **Wichtige Hinweise**

* Verwenden Sie einen Web-Farbwähler oder -Generator, um die gewünschten Farbwerte zu ermitteln.
* Achten Sie auf Konsistenz mit dem Gesamtdesign und Farbschema Ihrer Experience-Cloud-Site.
* Testen Sie Ihre Stiländerungen immer, um den gewünschten visuellen Effekt und die Barrierefreiheit sicherzustellen.


---

# 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-group.md?ask=<question>&goal=<endgoal>
```

`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.