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 l'apparence de chacun des cinq types de boutons, ainsi que les cas d'utilisation.

Type

Apparence

Objectif

Plein

Arrière-plan uni avec du texte contrasté.

Boutons à forte intensité. Ils sont destinés aux actions principales d'une application, telles que "Envoyer" et "Enregistrer". L'effet d'ombre souligne l'importance du bouton.

Tonal plein

La couleur d'arrière-plan varie pour correspondre à la surface.

Également pour les actions principales ou importantes. Les boutons remplis sont plus lourds visuellement et conviennent à des fonctions telles que "Ajouter au panier" et "Se connecter".

Élevée

Démarquez-vous grâce à une ombre.

Ils jouent un rôle similaire aux boutons tonaux. Augmentez l'élévation pour que le bouton soit encore plus visible.

Contours

Comprend une bordure sans remplissage.

Boutons à intensité moyenne, contenant des actions importantes, mais non 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 de Material Design.

<ph type="x-smartling-placeholder">
</ph> Un exemple de chacun des cinq composants du bouton, avec leurs caractéristiques uniques mises en évidence.
Figure 1. Les cinq composants du bouton.

Surface d'API

  • onClick: fonction appelée lorsque l'utilisateur appuie sur le bouton.
  • enabled : lorsque ce paramètre est défini sur "false", le bouton apparaît 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 rempli utilise le composable de base Button. 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

Cette implémentation est la suivante :

<ph type="x-smartling-placeholder">
</ph> Un bouton plein sur un arrière-plan violet indique &quot;remplie&quot;.
Figure 2. Bouton rempli.

Bouton tonal rempli

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 implémenter le composant :

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

Cette implémentation est la suivante :

Bouton tonal avec un arrière-plan violet clair indiquant &quot;rempli&quot;.
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 :

Bouton transparent avec contours d&#39;une bordure sombre et intitulé &quot;Contours&quot;.
Figure 4. Un 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 d'un bouton avec un contour et une ombre.

L'extrait de code suivant montre comment implémenter 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> Un bouton surélevé sur fond gris avec le texte &quot;Elevated&quot; (Élevé).
Figure 5. Bouton surélevé.

Bouton de texte

Le composant de bouton de texte utilise le composable TextButton. Tant qu'il n'est pas enfoncé, il ne s'affiche que sous forme de texte. Par défaut, il n'a pas de remplissage ni de contour solides.

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 :

Bouton de texte &quot;Bouton de texte&quot;
Figure 6 Bouton textuel

Ressources supplémentaires