Bouton

keywords: AiAssisted, product:JetpackCompose

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 :

Saisie Apparence Objectif
Plein Arrière-plan uni avec texte contrasté. Boutons à forte intensité. Elles concernent les actions principales d'une application, telles que "Envoyer" et "Enregistrer". L'effet d'ombre met en évidence 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 tonaux remplis offrent un poids visuel plus important et conviennent aux fonctions telles que "Ajouter au panier" et "Se connecter".
Élevée Se démarque par son ombre. Elles ont un objectif semblable à 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".

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 sur fond violet avec le texte "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 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 ton sur ton avec un arrière-plan violet clair et le texte "Tonal".
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 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 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. Il s'agit d'un bouton plein 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 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. Il n'apparaît que sous forme de texte jusqu'à ce qu'il soit sélectionné. 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 de texte intitulé "Bouton de texte"
Figure 6. Bouton de texte.

Ressources supplémentaires