Buttons

Stato del componente:Pronto

Comunemente chiamati pulsanti, sono elementi interattivi che danno il via a un'azione o a un evento. L'etichetta di testo o l’icona che accompagna ogni pulsante ha l'obiettivo di chiarire cosa succederà in interfaccia una volta iniziata l'interazione

Componenti

Metadati e link per approfondire

Utile per

Anteprima

Inizio componente:Fine componente.
Risoluzione

Quando usarlo

I pulsanti comunicano che l’interazione dà il via a un’azione o a un evento. Non dovrebbero essere utilizzati come elementi di navigazione.

Come usarlo

  • Usa la variante primary per valorizzare l’azione principale
  • Usa la variante secondary per valorizzare l’azione secondaria
  • Usa pulsanti disabilitati con moderazione, assicurandoti che per l’utente sia chiaro come attivarli
  • Per comunicare senza ambiguità la gerarchia delle azioni generate dai pulsanti, usa le varianti di grandezza e tipologia.
  • Usa un pulsante con icona per aggiungere un’informazione visiva all’interazione (es. pulsante di accesso ad area riservata)

Attenzione a

  • Non usare più di un pulsante primary nello stesso contesto di azione
  • Non usare pulsanti primary per azioni di valore secondario
  • Non usare i pulsanti all’interno di paragrafi di testo

Buone pratiche sui contenuti

  • Le etichette di testo devono comunicare in maniera immediata, chiara e senza ambiguità il significato dell’azione
  • Non usare etichette di testo troppo lunghe
  • Prediligi etichette di testo che fanno riferimento a una sola azione alla volta
  • Usa la seconda persona singolare (es. "Aggiungi un servizio")
  • Usa la prima persona singolare nel caso di accettazione di termini e condizioni o modali informative (es. "Accetto" o "Ho capito")
  • I pulsanti con sola icona potrebbero generare ambiguità: se possibile, aggiungi sempre un’etichetta di testo

Accessibilità

Lo stato delle verifiche di accessibilità effettuate sul componente Bootstrap Italia

CaratteristicaStatoDescrizione
Visivamente accessibileProntoUso e contrasto dei colori, leggibilità
Amichevole con lettori di schermoProntoStruttura titolazioni, etichette e testi alternativi
NavigabileProntoFocus, struttura, navigazione da tastiera o altri device
ComprensibileProntoComprensibile, prevedibile, gestione semplice dell’errore

Stato del componente

Lo stato del presente componente nelle diverse librerie di design e sviluppo del design system

LibreriaStato componenteLink
UI Kit (design)ProntoKit nel kit UI Figma (si apre in una nuova finestra)
Bootstrap ItaliaProntoScheda documentazione (si apre in una nuova finestra)
ReactDa rivedereScheda storybook (si apre in una nuova finestra)
AngularNon presente

Anatomia

In stesura

Comportamento

In stesura

Specifiche di design

In stesura

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici

Anteprima

Inizio componente:Fine componente.
Risoluzione

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici