Button

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 cas d'utilisation.

Saisie

Apparence

Objectif

Plein

Arrière-plan uni avec texte contrasté.

Boutons à forte intensité. Elles concernent les actions principales dans 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 pour correspondre à la surface.

Également pour les actions principales ou importantes. Les boutons pleins sont plus visibles et conviennent aux fonctions telles que "Ajouter au panier" et "Se connecter".

Élevée

Se démarque par son ombre.

Rôle similaire à celui des boutons tonaux. Augmentez l'élévation pour que le bouton soit encore plus visible.

Contours

Comporte une bordure sans remplissage.

Boutons d'intensité moyenne, contenant des actions importantes, mais pas principales. Ils se marient 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.

Boutons à faible emphase, idéaux pour les actions moins critiques telles que 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 de bouton.

Surface d'API

  • onClick : fonction appelée lorsque l'utilisateur appuie sur le bouton.
  • enabled : lorsque ce paramètre est défini sur "false", le bouton apparaît 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 rempli

Le composant de bouton rempli utilise le composable de base Button. Par défaut, il est rempli 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 avec le texte "filled" (rempli).
Figure 2 : Bouton rempli.

Bouton tonal rempli

Le composant de bouton tonal rempli utilise le composable FilledTonalButton. Par défaut, il est rempli d'une couleur tonale.

L'extrait 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 avec un arrière-plan violet clair et le texte "filled" (rempli).
Figure 3 : Bouton tonal.

Bouton avec contours

Le composant de bouton à contour utilise le composable OutlinedButton. Par défaut, il apparaît avec un contour.

L'extrait 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 une bordure foncée et le texte "Outlined" (Contour).
Figure 4. Bouton avec contours.

Bouton surélevé

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

L'extrait 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 arrière-plan gris et le texte "Surélevé".
Figure 5 : Bouton surélevé.

Bouton de texte

Le composant de bouton de texte utilise le composable TextButton. Jusqu'à ce que vous appuyiez dessus, il n'apparaît que sous forme de texte. Par défaut, il n'a pas de remplissage ni de contour.

L'extrait 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 intitulé "Bouton de texte"
Figure 6. Bouton de texte.

Ressources supplémentaires