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.

Type

Apparence

Objectif

Plein

Arrière-plan uni avec texte contrasté

Boutons à forte intensité. Ils sont destinés aux actions principales d'une application, telles que "Envoyer" et "Enregistrer". L'effet d'ombre met en avant l'importance du bouton.

Nuance remplie

La couleur d'arrière-plan varie pour correspondre à la surface.

Également pour les actions principales ou importantes. Les boutons remplis sont plus lourds visuellement et conviennent à des fonctions telles que "Ajouter au panier" et "Se connecter".

Élevée

Se démarque par une ombre.

Ils jouent un rôle similaire aux boutons tonaux. Augmentez l'élévation pour que le bouton soit encore plus visible.

Contours

Comporte une bordure sans remplissage.

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

Boutons à faible accentuation, idéaux pour les actions moins critiques telles que les liens de navigation ou les fonctions secondaires telles que "En savoir plus" ou "Afficher les détails".

L'image suivante illustre les cinq types de boutons de 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 de l'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 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 avec un arrière-plan violet et 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 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 avec le texte "filled" (rempli).
Figure 3 Bouton tonal.

Bouton avec contours

Le composant de bouton avec contour utilise le composable OutlinedButton. Il s'affiche 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 un contour sombre et le texte "Contour".
Figure 4. Bouton avec contours.

Bouton surélevé

Le composant de bouton surélevé utilise le composable ElevatedButton. Il comporte une ombre qui représente l'effet d'élévation par défaut. Notez qu'il s'agit essentiellement d'un bouton avec un contour et une 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 :

Un bouton surélevé sur fond gris avec le texte "Elevated" (Élevé).
Figure 5 Bouton surélevé.

Bouton de texte

Le composant de bouton de texte utilise le composable TextButton. Tant qu'il n'est pas enfoncé, il ne s'affiche que sous forme de texte. Il n'a pas de remplissage ni de contour solides par défaut.

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 "Bouton de texte"
Figure 6 Bouton de texte.

Ressources supplémentaires