Les boutons sont des composants fondamentaux qui permettent à l'utilisateur de déclencher une action définie. Il existe cinq types de boutons. Le tableau suivant décrit l'apparence de chacun des cinq types de boutons, ainsi que les emplacements où vous devez les utiliser.
Type |
Apparence |
Finalité |
---|---|---|
Plein |
Arrière-plan uni avec du texte contrasté. |
Boutons à forte intensité Il s'agit des actions principales d'une application, telles que "envoyer" et "enregistrer". L'effet d'ombre souligne l'importance du bouton. |
Tonal plein |
La couleur de l'arrière-plan varie en fonction de la surface. |
Également pour les actions principales ou importantes. Les boutons pleins offrent plus de poids visuel et offrent des fonctions de costume telles que « ajouter au panier » et « Se connecter ». |
Élevée |
Démarquez-vous grâce à une ombre. |
A un rôle semblable à celui des boutons tonales. Augmentez l'élévation pour que le bouton soit encore plus visible. |
Contours |
Comprend une bordure sans remplissage. |
Boutons d'intensité moyenne, contenant des actions importantes, mais pas principales. Ils fonctionnent bien avec d'autres boutons pour indiquer des actions secondaires alternatives comme "Annuler" ou "Retour". |
Texte |
Affiche le texte sans arrière-plan ni bordure. |
Les boutons à faible intensité |
L'image suivante illustre les cinq types de boutons dans Material Design.
Surface de l'API
onClick
: fonction appelée lorsque l'utilisateur appuie sur le bouton.enabled
: lorsqu'il est défini sur "false", ce paramètre indique que le bouton est indisponible et inactif.colors
: instance deButtonColors
qui détermine les couleurs utilisées dans le bouton.contentPadding
: marge intérieure du bouton.
Bouton rempli
Le composant Bouton rempli utilise le composable Button
de base. Il est rempli d'une couleur unie par défaut. L'extrait de code suivant montre comment implémenter le composant:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
Cette implémentation est la suivante :
![Un bouton rempli avec un arrière-plan violet indiquant "remplie".](https://developer.android.com/static/develop/ui/compose/images/components/button-filled.png?authuser=3&hl=fr)
Bouton Tonal plein
Le composant Bouton Tonal plein utilise le composable FilledTonalButton
.
Par défaut, il est rempli d'une couleur tonale.
L'extrait de code suivant montre comment mettre en œuvre le composant:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
Cette implémentation est la suivante :
![Bouton tonal avec un arrière-plan violet clair indiquant "rempli".](https://developer.android.com/static/develop/ui/compose/images/components/button-tonal.png?authuser=3&hl=fr)
Bouton avec contours
Le composant "Bouton encadré" utilise le composable OutlinedButton
. Il apparaît avec un contour par défaut.
L'extrait de code suivant montre comment mettre en œuvre le composant:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
Cette implémentation est la suivante :
![Bouton transparent avec contours d'une bordure sombre et intitulé "Contours".](https://developer.android.com/static/develop/ui/compose/images/components/button-outlined.png?authuser=3&hl=fr)
Bouton surélevé
Le composant de bouton surélevé utilise le composable ElevatedButton
. Elle présente une ombre qui représente l'effet d'altitude par défaut. Notez qu'il s'agit essentiellement d'un bouton avec contours d'ombre.
L'extrait de code suivant montre comment mettre en œuvre le composant:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
Cette implémentation est la suivante :
![Bouton "Surélevé" avec un arrière-plan gris indiquant "Élevée".](https://developer.android.com/static/develop/ui/compose/images/components/button-elevated.png?authuser=3&hl=fr)
Bouton "Texte"
Le composant Text Button utilise le composable TextButton
. Tant que vous n'avez pas appuyé sur ce bouton,
il n'apparaît que sous forme de texte. Par défaut, il n’a pas de remplissage ou de contour plein.
L'extrait de code suivant montre comment mettre en œuvre le composant:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
Cette implémentation est la suivante :
![Bouton textuel indiquant "Bouton de texte"](https://developer.android.com/static/develop/ui/compose/images/components/button-text.png?authuser=3&hl=fr)