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 :

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

Cette implémentation est la suivante :

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 de code montre comment implémenter le composant :

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

Cette implémentation est la suivante :

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 de code montre comment implémenter le composant :

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

Cette implémentation est la suivante :

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 de code montre comment implémenter le composant :

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

Cette implémentation est la suivante :

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 de code montre comment implémenter le composant :

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

Cette implémentation est la suivante :

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

Ressources supplémentaires