Bouton

Les boutons sont des composants fondamentaux qui permettent à l'utilisateur de déclencher une action définie. Il existe cinq types de boutons. Ce tableau décrit l'apparence de chacun des cinq types de boutons, ainsi que l'endroit où vous devez les utiliser :

Type Apparence Objectif
Rempli Arrière-plan opaque avec texte contrasté. Boutons à forte emphase. Ils concernent les actions principales d'une application, telles que "Envoyer" et "Enregistrer". L'effet d'ombre met en évidence l'importance du bouton.
Rempli tonal La couleur de l'arrière-plan varie pour correspondre à la surface. Également pour les actions principales ou importantes. Les boutons remplis tonaux offrent plus de poids visuel et conviennent aux fonctions telles que "Ajouter au panier" et "Se connecter".
Élevé Se démarque par son ombre. Ils ont un objectif semblable à celui des boutons tonaux. Augmentez l'élévation pour que le bouton soit encore plus visible.
Avec contour Comporte une bordure sans remplissage. Boutons d'emphase moyenne, contenant des actions importantes, mais pas principales. Ils s'associent 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 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".

Cette image 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 que le système appelle lorsque l'utilisateur appuie sur le bouton.
enabled
Lorsque la valeur est false, ce paramètre rend le bouton 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 montre comment implémenter le composant :

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

Cette implémentation se présente comme suit :

Bouton rempli avec un fond violet et le texte "Rempli".
Figure 2. Bouton rempli.

Bouton rempli tonal

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

L'extrait montre comment implémenter le composant :

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

Cette implémentation se présente comme suit :

Bouton tonal avec un fond violet clair et le texte "Tonal".
Figure 3. Bouton tonal.

Bouton avec contour

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

L'extrait montre comment implémenter le composant :

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

Cette implémentation se présente comme suit :

Bouton avec contour transparent avec une bordure foncée et le texte "Contour".
Figure 4. Bouton avec contour.

Bouton élevé

Le composant de bouton élevé utilise le composable ElevatedButton. Par défaut, il comporte une ombre qui représente l'effet d'élévation. Il s'agit d'un bouton rempli qui inclut une ombre.

L'extrait montre comment implémenter le composant :

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

Cette implémentation se présente comme suit :

Bouton élevé avec un fond gris et le texte "Élevé".
Figure 5. Bouton élevé.

Bouton Texte

Le composant de bouton Texte utilise le composable TextButton. Il n'apparaît que sous forme de texte jusqu'à ce qu'il soit appuyé. Par défaut, il n'a pas de remplissage ni de contour.

L'extrait montre comment implémenter le composant :

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

Cette implémentation se présente comme suit :

Bouton Texte intitulé "Bouton Texte"
Figure 6. Bouton Texte.

Ressources supplémentaires