# 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 dei siti Experience.

Usalo per presentare azioni correlate affiancate — come "Salva" e "Annulla", "Modifica" e "Elimina", o opzioni di navigazione per diverse sezioni. I pulsanti rimangono visivamente connessi come un'unica unità, rendendo chiaro che sono scelte correlate.

Perfetto per azioni di moduli, opzioni di gestione dei record, navigazione tipo schede, o in qualsiasi contesto in cui gli utenti del portale devono 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 al design e alla funzionalità del tuo sito Experience Cloud in modo perfetto:

### **Impostazioni Chiave**

#### **Visualizza come riga**

Abilita questa impostazione per disporre i pulsanti orizzontalmente nello 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 messi in un comodo menu a discesa.

#### **Menu dei Pulsanti**

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

#### **Pulsanti**

* **Etichetta:** Inserisci il testo che vuoi appaia sul pulsante.
* **Nome icona:** Se vuoi, scegli un'icona da posizionare sul pulsante.
* **Posizione icona:** Specifica se l'icona deve essere a 'left' o a 'right' dell'etichetta del pulsante.
* **Variante:** Puoi selezionare l'aspetto del pulsante dagli stili predefiniti ('neutral', 'brand', 'destructive', ecc.).
* **Disabilitato:** Abilita questa impostazione se desideri che il pulsante inizi in uno stato disabilitato, impedendo l'interazione dell'utente.
* **Nascosto:** Abilita questa impostazione se desideri che il pulsante sia inizialmente nascosto alla vista.
* **Interazione al Click:** Questa sezione cruciale ti permette di definire cosa succede quando un utente clicca 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 con una chiara gerarchia visiva in mente. Usa la variante 'brand' per enfatizzare le azioni primarie.
* Usa la variante 'destructive' con parsimonia per azioni che hanno conseguenze significative.
* Assicurati che le etichette dei pulsanti siano concise e descrivano accuratamente la loro funzione.
* Testa sempre accuratamente la configurazione del tuo Gruppo di Pulsanti su diversi dispositivi e browser per garantire un'esperienza utente ottimale.

***

## Aspetto e Stile <a href="#use-cases-and-examples" id="use-cases-and-examples"></a>

Il componente Avonni Button Group offre opzioni di stile complete per personalizzare il suo aspetto all'interno del tuo sito Experience Cloud. Di seguito è riportata una suddivisione 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 focalizzato).
* **colore al passaggio:** Imposta il colore del testo o dell'icona quando l'utente passa il mouse sopra il pulsante.
* **famiglia del font:** Specifica il font da utilizzare per il testo del pulsante.
* **dimensione del font:** Controlla la dimensione del testo del pulsante.
* **stile del font:** Imposta lo stile del font (es. normal, italic, oblique).
* **peso del font:** Determina lo spessore del testo del pulsante (es. normal, bold, bolder).

</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:** Imposta il colore di sfondo quando l'utente passa il mouse sopra il pulsante.

</details>

<details>

<summary>Bordo</summary>

* **colore:** Imposta il colore del bordo predefinito.
* **colore attivo:** Imposta il colore del bordo quando il pulsante è attivo.
* **colore al passaggio:** 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 (es. solid, dashed, dotted).

</details>

***

### **Esempio di Utilizzo**

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

```
Etichetta/Icona:
   colore: bianco
   colore al passaggio: #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 generale e lo schema di colori del tuo sito Experience Cloud.
* Testa sempre le modifiche di stile per garantire l'effetto visivo desiderato e l'accessibilità.