Bouton

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 et indique où les utiliser.

Type

Apparence

Finalité

Plein

Arrière-plan uni avec du texte contrasté.

Boutons à forte intensité. Ils correspondent aux actions principales d'une application, par exemple "envoyer" et "enregistrer". L'effet d'ombre souligne l'importance du bouton.

Tonalité emplie

La couleur de l'arrière-plan varie en fonction de la surface.

Également pour les actions principales ou importantes. Les boutons pleins offrent des fonctions plus visuelles pour le poids et la tenue des vêtements, comme "Ajouter au panier" et "Se connecter".

Élevée

Elle se démarque par une ombre.

Correspond à un rôle semblable à celui des boutons tonales. Augmentez l'élévation pour que le bouton apparaisse encore plus clairement.

Contours

comporte une bordure sans remplissage ;

Des boutons d'intensité moyenne, contenant des actions importantes, mais non principales Ils se combinent bien avec d'autres boutons pour indiquer des actions secondaires alternatives, comme "Annuler" ou "Retour".

Texte

Affiche du texte sans arrière-plan ni bordure.

Les boutons à faible intensité, parfaits pour les actions moins critiques comme les liens de navigation, ou les fonctions secondaires comme "En savoir plus" ou "Afficher les détails"

L'image suivante illustre les cinq types de boutons dans Material Design.

Exemple de chacun des cinq composants de bouton, avec leurs caractéristiques uniques mises en évidence.
Figure 1. Les cinq composants du bouton

Surface d'API

  • onClick: fonction appelée lorsque l'utilisateur appuie sur le bouton.
  • enabled: lorsqu'il est défini sur "false", ce paramètre fait apparaître le bouton comme indisponible et inactif.
  • colors: instance de ButtonColors qui détermine les couleurs utilisées dans le bouton.
  • contentPadding: marge intérieure du bouton.

Bouton plein

Le composant "Bouton plein" utilise le composable Button de base. Par défaut, elle est remplie d'une couleur unie. L'extrait de code suivant montre comment implémenter le composant:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

Cette implémentation est la suivante :

Bouton rempli sur fond violet qui indique "Remplissage".
Figure 2. Bouton rempli.

Bouton aux tons rechargés

Le composant de bouton tonal plein utilise le composable FilledTonalButton. Elle est remplie d'une couleur tonale par défaut.

L'extrait de code suivant montre comment implémenter le composant:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

Cette implémentation est la suivante :

Bouton tonal sur fond violet clair qui indique "Plein".
Figure 3. Un bouton de couleur

Bouton avec contours

Le composant de bouton encadré utilise le composable OutlinedButton. Il apparaît avec un contour par défaut.

L'extrait de code suivant montre comment implémenter le composant:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

Cette implémentation est la suivante :

Bouton transparent avec contours sombres portant la mention "Contours".
Figure 4. Un bouton avec contours

Bouton surélevé

Le composant de bouton surélevé utilise le composable ElevatedButton. Par défaut, son ombre représente l'effet d'élévation. Notez qu'il s'agit essentiellement d'un bouton avec contours d'ombre.

L'extrait de code suivant montre comment implémenter le composant:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

Cette implémentation est la suivante :

Bouton surélevé avec un fond gris indiquant « Surélevé ».
Figure 5. Un bouton surélevé.

Bouton "Texte"

Le composant Text Button utilise le composable TextButton. Tant que vous n'avez pas appuyé dessus, il n'apparaît que sous forme de texte. Par défaut, il n'a pas de remplissage ni de contour pleins.

L'extrait de code suivant montre comment implémenter le composant:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

Cette implémentation est la suivante :

Bouton de texte indiquant « Bouton de texte »
Figure 6. Bouton de texte

Ressources supplémentaires