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 uni 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 en fonction de 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 distingue par une 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 du texte sans arrière-plan ni bordure. Boutons peu mis en avant, 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 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 rempli

Le composant de bouton plein utilise le composable de base Button. Par défaut, il est rempli d'une couleur unie. L'extrait de code montre comment implémenter le composant et le prévisualiser de manière interactive :

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

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 de code montre comment implémenter le composant et le prévisualiser de manière interactive :

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("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 de code montre comment implémenter le composant et le prévisualiser de manière interactive :

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

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 de code montre comment implémenter le composant et le prévisualiser de manière interactive :

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

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 de code montre comment implémenter le composant et le prévisualiser de manière interactive :

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

Ressources supplémentaires