> 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.md). # AX - Button ## Panoramica **AX - Button** è un componente di Experience Cloud che crea pulsanti cliccabili nelle pagine di Experience Sites per attivare azioni come la navigazione, l'invio di moduli, la creazione di record o l'apertura di finestre modali. Usalo per aggiungere call-to-action personalizzate, inviare moduli, navigare a pagine specifiche, creare record o attivare flow. Configura l'etichetta, lo stile, l'icona e l'azione del pulsante in Experience Builder senza codice. Perfetto per CTA del portale, navigazione personalizzata, azioni "Contattaci", flussi di lavoro per la creazione di record o qualsiasi interazione utente che richieda un pulsante chiaro e con il brand. *** ## **Configurazione del pulsante** Dopo aver trascinato AX - Button sulla tua pagina in Experience Builder, configurerai due aspetti principali: l'aspetto del pulsante e cosa accade quando gli utenti fanno clic su di esso. ### **Aspetto del pulsante** Queste impostazioni controllano l'aspetto del pulsante nella pagina. **Etichetta** – Il testo visualizzato sul pulsante. Mantienilo breve e orientato all'azione (ad esempio, "Invia richiesta", "Visualizza dettagli", "Contattaci"). **Nome icona** – Aggiungi un'icona accanto all'etichetta per aiutare gli utenti a comprendere rapidamente l'azione. Scegli dalla libreria di icone di Salesforce: tra le opzioni comuni ci sono "utility:download" per i download o "utility:email" per le azioni di contatto. **Posizione icona** – Posiziona l'icona a sinistra o a destra dell'etichetta. Il posizionamento a sinistra funziona bene nella maggior parte dei casi, mentre il posizionamento a destra può indicare una navigazione in avanti. **Variante** – Lo stile visivo del pulsante. Le opzioni in genere includono primaria (in grassetto, attira l'attenzione), secondaria (più discreta) o distruttiva (rossa, per le azioni di eliminazione). Scegli in base all'importanza dell'azione. **Allineamento orizzontale** – Posiziona il pulsante all'interno del suo contenitore: a sinistra, al centro o a destra. L'allineamento al centro funziona bene per le CTA indipendenti, mentre l'allineamento a sinistra è adatto ai pulsanti dei moduli. **Estendi** – Se abilitata, l'opzione espande il pulsante fino a riempire l'intera larghezza del suo contenitore. Usala per CTA in evidenza o quando vuoi che il pulsante corrisponda alla larghezza dei campi del modulo sopra di esso. **Disabilitato** – Impedisce agli utenti di fare clic sul pulsante. Usalo quando un'azione non è ancora disponibile, ad esempio disattivando il pulsante "Invia" finché i campi obbligatori non sono stati completati ### **Azioni del pulsante (Collega a)** La **Collega a** imposta determina cosa accade quando gli utenti fanno clic sul pulsante. Scegli il tipo di azione che corrisponde a ciò che vuoi ottenere.
[**Mostra notifica toast**](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/show-toast.md) Mostra un breve messaggio di notifica che appare nella parte superiore della pagina e scompare dopo alcuni secondi. Quando usarlo: messaggi di conferma come "Modifiche salvate" o "Richiesta inviata" che non richiedono alcuna azione da parte dell'utente. I toast forniscono feedback senza interrompere il flusso di lavoro dell'utente. [**Naviga**](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/navigate.md) Reindirizza gli utenti a un'altra pagina, all'interno del tuo Experience Site oppure a un URL esterno. Quando usarlo: pulsanti "Scopri di più" che portano a pagine di dettaglio, navigazione "Torna alla home" o collegamenti a risorse esterne. Puoi navigare verso pagine standard, pagine di record o URL personalizzati. [**Apri finestra modale di avviso**](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/open-alert-modal.md) Apre una finestra popup con un messaggio che gli utenti devono riconoscere prima di continuare. Quando usarlo: avvisi importanti che gli utenti devono leggere, come termini e condizioni, informative sulla privacy o avvisi prima che proseguano con un'azione. [**Apri conferma**](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/open-confirm.md) Mostra una finestra di dialogo di conferma che chiede agli utenti di confermare o annullare la loro azione. Quando usarlo: azioni con conseguenze che non possono essere annullate, come eliminare un record, annullare un invio o rimuovere l'accesso. La finestra di dialogo offre agli utenti la possibilità di ripensarci prima di procedere. [**Apri dialogo Flow**](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/open-flow-dialog.md) Avvia un Flow di Salesforce in una finestra modale popup. Quando usarlo: processi in più fasi come l'invio di un caso di supporto, il completamento di un sondaggio, l'aggiornamento delle informazioni dell'account o qualsiasi flusso di lavoro guidato. Crea il flow in Flow Builder, quindi collegalo al pulsante: il flow viene eseguito all'interno della finestra modale senza allontanarsi dalla pagina corrente *** ## Specifiche {% tabs %} {% tab title="Proprietà" %} | Nome | Descrizione | Utilizzo | | ---------------------------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Etichetta** | Definisce il testo visualizzato sul pulsante. | Inserisci un'etichetta concisa e chiara che indichi all'utente l'azione del pulsante. | | **Nome icona** | Scegli un'icona da visualizzare sul pulsante. | Seleziona un'icona appropriata che rappresenti visivamente l'azione del pulsante, migliorando la comprensione da parte dell'utente. | | **Posizione icona** | Determina la posizione dell'icona all'interno del pulsante. | Scegli una posizione che bilanci visivamente il pulsante e si allinei alla direzione del design della tua pagina web. | | **Variante** | Seleziona una variante di stile predefinita per il pulsante. | Scegli una variante adatta al contesto dell'azione del pulsante e al linguaggio visivo complessivo della pagina web. | | **Allineamento orizzontale** | Definisce l'allineamento orizzontale del pulsante all'interno del suo contenitore. | Allinea il pulsante per ottenere armonia visiva e soddisfare i requisiti di layout della pagina web. | | **Espandi** | Determina se il pulsante deve estendersi per riempire il suo contenitore. | Abilita questa opzione per far sì che il pulsante si espanda orizzontalmente, riempiendo lo spazio disponibile all'interno del suo contenitore. | | **Disabilitato** | Controlla lo stato attivo o disabilitato del pulsante. | Disabilita il pulsante per impedire l'interazione dell'utente, utile in condizioni in cui una certa azione non è applicabile o deve essere temporaneamente impedita. | | {% endtab %} | | | {% tab title="Aspetto" %} ### **Spaziatura (superiore, inferiore, sinistra, destra)** * **Margine superiore, margine inferiore, margine sinistro, margine destro:** Questi controllano lo spazio attorno al pulsante in ogni direzione. Usali per posizionare con precisione i pulsanti, evitando sovrapposizioni con altri elementi e creando spazio di respiro. ### **Etichetta/Icona** * **Colore:** Il colore predefinito del testo o dell'icona del pulsante. * **Colore attivo:** Il colore in cui cambia il testo/l'icona quando il pulsante viene cliccato o toccato. * **Colore hover:** Il colore in cui cambia il testo/l'icona quando l'utente passa il mouse sopra il pulsante. * **Famiglia di caratteri:** Specifica il tipo di carattere utilizzato per l'etichetta testuale del pulsante. Assicurati che sia in linea con il design complessivo del sito e che sia facile da leggere. * **Dimensione del carattere:** Controlla la dimensione del testo dell'etichetta. Regolala in base alle esigenze di leggibilità e di enfasi. * **Stile del carattere:** Imposta lo stile del testo, ad esempio normale, corsivo o obliquo. Usalo con parsimonia per un'enfasi speciale. * **Peso del carattere:** Determina il grassetto del testo. Valuta l'uso di pesi diversi per differenziare i pulsanti primari e secondari. ### **Sfondo** * **Colore di sfondo:** Il colore predefinito dello sfondo del pulsante. * **Colore di sfondo attivo:** Il colore di sfondo del pulsante quando viene cliccato o toccato. * **Colore di sfondo hover:** Il colore di sfondo quando l'utente passa il mouse sopra il pulsante. ### **Bordo** * **Colore del bordo:** Il colore del bordo del pulsante. * **Colore del bordo attivo:** Il colore del bordo quando il pulsante è attivo. * **Colore del bordo hover:** Il colore del bordo quando l'utente passa il mouse sopra il pulsante. * **Dimensione del bordo:** Lo spessore del bordo (in pixel). * **Stile del bordo:** Il tipo di bordo: solido, puntinato, tratteggiato, ecc. * **Raggio del bordo:** Controlla quanto sono arrotondati gli angoli del pulsante. Valori più alti portano a pulsanti più morbidi e più arrotondati {% 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-it/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.