Pulsanti
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Utilizza un componente Pulsante per le azioni ben comprese dagli utenti e che non richiedono un'etichetta di testo. I pulsanti si distinguono dai chip per la loro forma circolare.
Anatomia
A. Contenuti
I pulsanti hanno un singolo spazio riservato a un'icona o a un testo. Scegli un'icona pertinente all'azione eseguita dal pulsante. Puoi utilizzare un testo con un massimo di tre caratteri se un'icona non è in grado di descrivere l'azione pertinente. Valuta la possibilità di utilizzare un componente Chip se un'icona non riesce a descrivere chiaramente l'azione
B. Contenitore
I contenitori dei pulsanti sono limitati a un singolo riempimento a tinta unita.
Pulsanti compatti
I pulsanti compatti sono più piccoli, ma hanno un'area toccabile più grande. L'area tocabile predefinita è 48 x 48 dp.
Gerarchia
Utilizza diversi colori di riempimento per indicare la gerarchia dei pulsanti.
Evidenziazione elevata
I pulsanti ad alta enfasi contengono azioni principali dell'app. Per i pulsanti ad alta enfasi, utilizza i colori Principale o Secondario per il contenitore e i colori Su Principale e Su Secondario per i contenuti. Per ulteriori informazioni, consulta Temi Material per Wear OS.
Enfasi media
I pulsanti di evidenza media si distinguono per un riempimento di colore meno contrastante. Contengono azioni meno importanti di quelle principali. Utilizza il colore della superficie per il contenitore e il colore Su superficie per i contenuti.
In alternativa, utilizza il componente personalizzato OutlinedButton per un pulsante di evidenza medio. Ha uno sfondo trasparente, un tratto colorato della variante principale con opacità del 60% e contenuti colorati principali.
Enfasi bassa (solo icona)
I pulsanti con enfasi bassa si distinguono per l'assenza di riempimento. Sono ideali per le aree più piccole del quadrante in cui è necessaria una disposizione compatta. Utilizza il colore Su superficie per i contenuti.
Dimensioni
Utilizza pulsanti di dimensioni diverse per enfatizzare o ridurre l'importanza delle azioni.
Grande
Icona (30 x 30 dp)
Contenitore (60 x 60 dp)
Predefinita
Icona (26 x 26 dp)
Contenitore (52 x 52 dp)
Piccolo
Icona (24 x 24 dp)
Contenitore (48 x 48 dp)
Extra small
Icona (24 x 24 dp)
Contenitore (32 x 32 dp)
Ti consigliamo di aggiungere ulteriore spaziatura intorno a questo pulsante per creare un target di tocco di almeno 48 dp. Si tratta delle dimensioni minime del target di tocco per l'accessibilità.
Utilizzo
Utilizza i pulsanti standard per consentire all'utente di eseguire una singola azione, ad esempio accettare o rifiutare una chiamata o avviare un timer.
Utilizza i pulsanti di attivazione/disattivazione per consentire all'utente di attivare o disattivare un'opzione, ad esempio selezionare e deselezionare i giorni della settimana o mettere in pausa e riavviare un timer.
Layout adattivi
Comportamento reattivo
1 pulsante
Il padding interno rimarrà invariato e i margini devono essere espressi in percentuale per evitare che i pulsanti si allunghino troppo e mantenere una dimensione relativa.
2 pulsanti
Quando sono presenti due pulsanti, vengono aggiunti margini interni percentuali per impedire che i pulsanti si allunghino troppo e mantenere una dimensione relativa.
IME
1 o 2 pulsanti
Gli IME con blocco di 2 o un solo pulsante si estendono sempre fino ai margini laterali, indipendentemente dalle dimensioni dello schermo.
3 pulsanti
Su schermi più piccoli di 225 dp, i pulsanti rimangono circolari e non si estendono. Sugli schermi più grandi, a partire da 225 dp, i pulsanti si estendono fino ai margini laterali.
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-07-27 UTC.
[null,null,["Ultimo aggiornamento 2025-07-27 UTC."],[],[],null,["# Buttons\n\nUse a [Button](/reference/kotlin/androidx/wear/compose/material/package-summary#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for actions that are well understood by users and don't need a text label. Buttons are distinguished from chips by their circular shape.\n\nAnatomy\n-------\n\n\n**A. Content**\n\nButtons have a single slot reserved for an icon or text. Choose an icon that is relevant to the action the button performs. You can use text with a maximum of three characters if an icon is unable to describe the relevant action. Consider the use of a Chip component if an icon cannot clearly describe the action\n\n**B. Container**\n\nButton containers are limited to a single solid color fill.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nButton types\n------------\n\n\n**Toggle buttons**\n\n[Toggle buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) enable users to toggle between two states. \n\n**Compact buttons**\n\n[Compact buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#CompactButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) appear smaller but have a larger tappable area. The default tappable area is 48x48 dp.\n\n\u003cbr /\u003e\n\nHierarchy\n---------\n\n\nUse different color fills to denote button hierarchy.\n\n**High emphasis**\n\nHigh emphasis buttons contain actions that are primary to the app. For high emphasis buttons use Primary or Secondary colors for the container and On Primary and On Secondary colors for the content. For more information see [Wear Material Theming](/training/wearables/design/theme).\n\n**Medium emphasis**\n\nMedium emphasis buttons are distinguished by a less contrasting color fill. They contain actions that are less important than the primary actions. Use the Surface color for the container and the On Surface color for the content.\n\nAlternatively, use the custom [OutlinedButton](/reference/kotlin/androidx/wear/compose/material/package-summary#OutlinedButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for a medium emphasis button. This has a transparent background, a primary variant colored stroke of 60% opacity, and primary colored content.\n**Low emphasis (icon only)**\n\n\u003cbr /\u003e\n\nLow emphasis buttons are distinguished by having no fill. They are best suited for smaller areas on the watch face where a compact arrangement is needed. Use the On Surface colour for the content.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSizes\n-----\n\nUse buttons of different sizes to emphasize or de-emphasize actions.\n\n\n**Large**\n\nIcon (30 x 30 dp) \nContainer (60 x 60 dp) \n\n**Default**\n\nIcon (26 x 26 dp) \nContainer (52 x 52 dp)\n\n\u003cbr /\u003e\n\n\n**Small**\n\nIcon (24 x 24 dp) \nContainer (48 x 48 dp) \n\n**Extra Small**\n\nIcon (24 x 24 dp) \nContainer (32 x 32 dp)\n\n\nIt's recommended to add additional padding around this button to create a tap target of at least 48 dp. This is our minimum tap target size for accessibility.\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nUse standard buttons to enable the user to take a single action such as accepting or declining a call, or starting a timer.\n\nUse toggle buttons to allow the user to turn an option on or off, such as selecting and deselecting days of the week or pausing and restarting a timer.\n\nAdaptive layouts\n----------------\n\n### **Responsive behavior**\n\n\n**1 button**\n\nThe internal padding will remain the same, and the margins should be percentages in order to stop the buttons from stretching too far, and keeping a relative size. \n\n**2 buttons**\n\nWhen there are 2 buttons, percentage internal margins are added in order to stop the buttons from stretching too far, and keeping a relative size.\n\n\u003cbr /\u003e\n\n### **IMEs**\n\n**1 or 2 Buttons**\n\nIMEs with 2 or a single button lockup always stretch all the way to the side margins regardless of screen size.\n\n**3 Buttons**\n\nOn screens smaller than 225 dp, the buttons remain circular and do not stretch. On larger screens, 225 dp or larger, the buttons stretch all the way to the side margins."]]
