Boutons
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Utilisez un composant Bouton pour les actions que les utilisateurs connaissent bien et qui ne nécessitent pas de libellé de texte. Les boutons se distinguent des chips par leur forme circulaire.
Anatomie
A. Contenu
Les boutons ont un seul emplacement réservé pour une icône ou du texte. Choisissez une icône adaptée à l'action exécutée par le bouton. Si une icône ne convient pas pour décrire l'action concernée, le texte ne doit pas comporter plus de trois caractères. Envisagez d'utiliser un composant Chip si une icône ne convient pas pour décrire clairement l'action.
B. Conteneur
Les conteneurs de boutons sont limités à un seul remplissage de couleur unie.
Boutons d'activation
Les boutons d'activation permettent aux utilisateurs de basculer entre deux états.
Boutons compacts
Les boutons compacts sont plus petits, mais leur zone tactile est plus grande. La zone tactile par défaut est de 48 x 48 dp.
Hiérarchie
Utilisez différents remplissages de couleur pour indiquer la hiérarchie des boutons.
Forte intensité
Les boutons à forte intensité représentent les actions principales de l'application. Pour ces boutons, utilisez les couleurs principales ou secondaires pour le conteneur et les couleurs "On Primary" et "On Secondary" pour le contenu. Pour en savoir plus, consultez la section Thématisation de Material pour Wear.
Intensité moyenne
Les boutons à intensité moyenne se distinguent par un remplissage avec des couleurs moins contrastées. Ils contiennent des actions moins importantes que les actions principales. Utilisez la couleur de surface pour le conteneur et la couleur "On Surface" pour le contenu.
Vous pouvez également utiliser le composant personnalisé OutlinedButton pour un bouton à intensité moyenne. Cette option présente un arrière-plan transparent, un trait dans une variante de la couleur principale à 60% d'opacité et un contenu en couleur primaire.
Faible intensité (icône uniquement)
Les boutons à faible intensité se distinguent par l'absence de remplissage. Elles conviennent particulièrement aux petites zones du cadran, qui nécessitent une disposition compacte. Utilisez la couleur "On Surface" pour le contenu.
Tailles
Utilisez des boutons de différentes tailles pour mettre en valeur ou masquer subtilement les actions.
Grand format
Icône (30 x 30 dp)
Conteneur (60 x 60 dp)
Par défaut
Icône (26 x 26 dp)
Conteneur (52 x 52 dp)
Petit format
Icône (24 x 24 dp)
Conteneur (48 x 48 dp)
Taille XS
Icône (24 x 24 dp)
Conteneur (32 x 32 dp)
Nous vous recommandons d'ajouter une marge intérieure supplémentaire autour de ce bouton afin de créer une cible tactile d'au moins 48 dp. Il s'agit de la taille minimale des cibles tactiles pour l'accessibilité.
Utilisation
Utilisez des boutons standards pour permettre à l'utilisateur d'effectuer une seule action, comme accepter ou refuser un appel, ou démarrer un minuteur.
Les boutons d'activation permettent à l'utilisateur d'activer ou de désactiver une option, comme sélectionner et désélectionner des jours de la semaine, ou suspendre et redémarrer un minuteur.
Mises en page adaptatives
Comportement réactif
1 bouton
La marge intérieure reste la même, et les marges doivent être exprimées en pourcentage afin d'empêcher les boutons de trop s'étirer et de conserver une taille relative.
2 boutons
Lorsqu'il y a deux boutons, des marges internes en pourcentage sont ajoutées pour empêcher les boutons de s'étirer trop et conserver une taille relative.
IME
1 ou 2 boutons
Les IME avec deux boutons de verrouillage ou un seul s'étendent toujours jusqu'aux marges latérales, quelle que soit la taille de l'écran.
3 boutons
Sur les écrans de moins de 225 dp, les boutons restent circulaires et ne s'étirent pas. Sur les écrans plus grands, de 225 dp ou plus, les boutons s'étendent jusqu'aux marges latérales.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 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."]]
