> 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-it/experience-components/ax-button-group.md).

# AX - Gruppo di pulsanti

## Panoramica

**AX - Gruppo di pulsanti** è un componente di Experience Cloud che visualizza più pulsanti correlati insieme come un gruppo unificato nelle pagine di Experience Sites.

Usalo per presentare azioni correlate fianco a fianco—come "Salva" e "Annulla," "Modifica" e "Elimina," oppure opzioni di navigazione per diverse sezioni. I pulsanti rimangono visivamente collegati come un'unica unità, rendendo chiaro che si tratta di scelte correlate.

Perfetto per azioni di modulo, opzioni di gestione record, navigazione in stile scheda o ovunque gli utenti del portale debbano scegliere tra più azioni correlate.

***

## Configurazione del Gruppo di pulsanti <a href="#use-cases-and-examples" id="use-cases-and-examples"></a>

Segui questi passaggi per adattare il componente Avonni Button Group in modo che si integri perfettamente con il design e la funzionalità del tuo sito Experience Cloud:

### **Impostazioni principali**

#### **Mostra come riga**

Abilita questa impostazione per disporre i pulsanti orizzontalmente sullo schermo. Disattivandola, i pulsanti verranno impilati verticalmente.

#### **Pulsanti visibili**

Questa impostazione determina il numero massimo di pulsanti visibili direttamente sullo schermo. Se hai più pulsanti del numero specificato, quelli rimanenti verranno inseriti in un pratico menu a discesa.

#### **Menu pulsanti**

* **Etichetta:** Imposta il testo visualizzato sul pulsante che apre il menu a discesa contenente pulsanti aggiuntivi.
* **Nome icona:** Nel menu pulsanti, seleziona un'icona appropriata (consulta Salesforce Lightning Design System per le icone disponibili).
* **Variante:** Scegli lo stile visivo del menu pulsanti (ad es. 'neutral', 'brand', 'inverse').
* **Allineamento menu:** Seleziona come il menu a discesa verrà posizionato rispetto al pulsante ('left' o 'right').

#### **Pulsanti**

* **Etichetta:** Inserisci il testo che desideri visualizzare sul pulsante.
* **Nome icona:** Se desideri, scegli un'icona da collocare sul pulsante.
* **Posizione icona:** Specifica se l'icona deve trovarsi a 'sinistra' o a 'destra' dell'etichetta del pulsante.
* **Variante:** Puoi selezionare l'aspetto del pulsante tra gli stili predefiniti ('neutral', 'brand', 'destructive', ecc.).
* **Disabilitato:** Abilita questa impostazione se vuoi che il pulsante inizi in stato disabilitato, impedendo l'interazione dell'utente.
* **Nascosto:** Abilita questa impostazione se vuoi che il pulsante sia inizialmente nascosto alla vista.
* **Interazione al clic:** Questa sezione fondamentale ti consente di definire cosa accade quando un utente fa clic sul pulsante. Consulta la pagina di documentazione "On Click Interactions" per un elenco completo delle possibili azioni e configurazioni.

### **Considerazioni importanti**

* Progetta il tuo Gruppo di pulsanti tenendo a mente una chiara gerarchia visiva. Usa la variante 'brand' per evidenziare le azioni principali.
* Usa con parsimonia la variante 'destructive' per azioni che hanno conseguenze significative.
* Assicurati che le etichette dei pulsanti siano concise e descrivano accuratamente la loro funzione.
* Testa sempre a fondo la configurazione del tuo Gruppo di pulsanti su dispositivi e browser diversi per garantire un'esperienza utente ottimale.

***

## Aspetto dello stile <a href="#use-cases-and-examples" id="use-cases-and-examples"></a>

Il componente Avonni Button Group offre opzioni di stile complete per personalizzarne l'aspetto all'interno del tuo sito Experience Cloud. Di seguito è riportata una panoramica degli attributi di stile disponibili:

<details>

<summary>Etichetta/Icona</summary>

* **colore:** Imposta il colore predefinito del testo o dell'icona.
* **colore attivo:** Imposta il colore del testo o dell'icona quando il pulsante è attivo (cliccato o in focus).
* **colore al passaggio del mouse:** Imposta il colore del testo o dell'icona quando l'utente passa il mouse sopra il pulsante.
* **famiglia di caratteri:** Specifica il font da utilizzare per il testo del pulsante.
* **dimensione del carattere:** Controlla la dimensione del testo del pulsante.
* **stile del carattere:** Imposta lo stile del carattere (ad es. normale, corsivo, obliquo).
* **peso del carattere:** Determina il grassetto del testo del pulsante (ad es. normale, grassetto, più grassetto).

</details>

<details>

<summary>Sfondo</summary>

* **colore:** Imposta il colore di sfondo predefinito del pulsante.
* **colore attivo:** Imposta il colore di sfondo quando il pulsante è attivo.
* **colore al passaggio del mouse:** Imposta il colore di sfondo quando l'utente passa il mouse sopra il pulsante.

</details>

<details>

<summary>Bordo</summary>

* **colore:** Imposta il colore predefinito del bordo.
* **colore attivo:** Imposta il colore del bordo quando il pulsante è attivo.
* **colore al passaggio del mouse:** Imposta il colore del bordo quando l'utente passa il mouse sopra il pulsante.
* **dimensione:** Controlla la larghezza del bordo.
* **stile:** Specifica lo stile del bordo (ad es. solido, tratteggiato, puntinato).

</details>

***

### **Esempio di utilizzo**

Per creare un gruppo di pulsanti con sfondo rosso, testo bianco e un sottile effetto al passaggio del mouse, considera la seguente configurazione:

```
Etichetta/Icona:
   colore: bianco
   colore al passaggio del mouse: #f5f5f5 

Sfondo:
   colore: rosso 

Bordo: 
   colore: rosso  
```

### **Note importanti**

* Usa un selettore di colori web o un generatore per trovare i codici colore desiderati.
* Cerca di mantenere coerenza con il design complessivo e la palette di colori del tuo sito Experience Cloud.
* Testa sempre le modifiche di stile per garantire l'effetto visivo desiderato e l'accessibilità.


---

# 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-it/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.