Button

Les boutons sont des composants fondamentaux qui permettent à l'utilisateur de déclencher un élément action. Il existe cinq types de boutons. Le tableau suivant décrit les de chacun des cinq types de boutons, ainsi que les endroits où les utiliser de l'IA générative.

Type	Apparence	Objectif
Plein	Arrière-plan uni avec du texte contrasté.	Boutons à forte intensité Il s'agit des actions principales d'une application, comme "envoyer" et "Enregistrer". L'effet d'ombre souligne l'importance du bouton.
Tonal plein	La couleur de l'arrière-plan varie en fonction de la surface.	Également pour les actions principales ou importantes. Les boutons remplis offrent plus de poids visuel et des fonctions de costume comme « ajouter au panier » et "Se connecter".
Élevée	Démarquez-vous grâce à une ombre.	A un rôle semblable à celui des boutons tonales. Augmentez l'élévation pour que le bouton soit encore plus visible.
Contours	Comprend une bordure sans remplissage.	Boutons d'intensité moyenne, contenant des actions importantes, mais pas principales. Ils fonctionnent 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 intensité, idéaux pour des actions moins critiques telles que des liens de navigation ou des fonctions secondaires comme "En savoir plus" ou "Afficher les détails".

L'image suivante illustre les cinq types de boutons dans Material Design.

<ph type="x-smartling-placeholder">

</ph>

Figure 1. Les cinq composants du bouton.

Surface de l'API

• onClick: fonction appelée lorsque l'utilisateur appuie sur le bouton.
• enabled: lorsqu'il est défini sur "false", ce paramètre entraîne l'affichage du 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 Bouton rempli utilise le composable Button de base. Il est rempli par une couleur unie par défaut. L'extrait de code suivant montre comment Implémentez le composant:

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

Remarque :Si vous souhaitez créer un bouton personnalisé, utilisez le composable Button.

Cette implémentation est la suivante :

<ph type="x-smartling-placeholder">

</ph>

Figure 2. Bouton plein.

Bouton Tonal plein

Le composant Bouton Tonal plein utilise le composable FilledTonalButton. Par défaut, il est rempli d'une couleur tonale.

L'extrait de code suivant montre comment mettre en œuvre le composant:

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

Cette implémentation est la suivante :

<ph type="x-smartling-placeholder">

</ph>

Figure 3. Bouton tonal

Bouton avec contours

Le composant "Bouton encadré" utilise le composable OutlinedButton. Il apparaît avec un contour par défaut.

L'extrait de code suivant montre comment mettre en œuvre le composant:

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

Cette implémentation est la suivante :

<ph type="x-smartling-placeholder">

</ph>

Figure 4. Bouton avec contours.

Bouton surélevé

Le composant de bouton surélevé utilise le composable ElevatedButton. Il contient une ombre qui représente l'effet d'altitude par défaut. Notez qu'il s'agit essentiellement un bouton avec une ombre.

L'extrait de code suivant montre comment mettre en œuvre le composant:

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

Cette implémentation est la suivante :

<ph type="x-smartling-placeholder">

</ph>

Figure 5. Un bouton surélevé

Bouton "Texte"

Le composant Text Button utilise le composable TextButton. Tant que vous n'avez pas appuyé sur le bouton, il apparaît comme uniquement du texte. Par défaut, il n’a pas de remplissage ou de contour plein.

L'extrait de code suivant montre comment mettre en œuvre le composant:

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

Cette implémentation est la suivante :

<ph type="x-smartling-placeholder">

</ph>

Figure 6. Bouton textuel

Ressources supplémentaires

• Bouton d'action flottant
• Documentation sur les interfaces utilisateur Material