--- title: Bouton slug: Web/Apps/Design/Building_Blocks/Buton translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Button ---

Effectue une action quand touché par l'utilisateur. Ce sont des objets de l'interface utilisateur hautements flexibles qui ont une grande variété de styles. Consultez le guide de codage pour la façon de mettre en œuvre des boutons qui ressemblent à ceux décrits ici.

Caractéristiques

Les boutons ont deux composantes : une cible visuelle et une cible de toucher. La cible de toucher est toujours plus grande, afin de réduire les erreurs de ciblage en rendant la touche plus facile à toucher.
Les boutons ont deux états : normal et pressé.
Ils peuvent aussi être désactivés, ce qui signifie qu'ils sont inutilisables, et sont seulement affichés pour indiquer qu'ils sont désactivés.

Il y a différents types de boutons :

Boutons d'action: Utilisés lorsqu'il n'y a que quelques actions et qu'une liste n'est pas nécessaire. Le bouton d'action principal utilise une couleur spéciale pour indiquer que c'est la première option.
Boutons de listes: Utilisés lors de l'affichage d'une liste d'actions, ou pour déclencher l'affichage d'un sélecteur de valeur.
Boutons de champ de saisie: Utilisés pour effectuer des actions avec les champs de saisie.
Boutons spéciaux/personnalisés: Utilisés pour fournir des actions spécifiques, comme l'enregistrement, la numérotation, etc.

Captures d'écran

Voici quelques exemples visuels de ce à quoi les boutons devraient ressembler. N'oubliez pas que vous pouvez utiliser les feuilles de style et des ressources d'images fournies dans le guide de codage pour les implémenter.

Boutons d'action

Utilisés lorsqu'il n'y a que quelques actions et qu'une liste n'est pas nécessaire. Le bouton d'action principal utilise une couleur spéciale pour indiquer que c'est la première option.

	Première action	Seconde action	Supprimer
Normal
Pressé
Désactivé

Sur un fond sombre, les boutons d'action ont une apparence spéciale, comme ci-dessous.

	Première action	Seconde action
Désactivé

Boutons de liste

Utilisés lors de l'affichage d'une liste d'actions, ou pour déclencher l'affichage d'un sélecteur de valeur.

Déclencheurs

	Déclencher une action dans la vue actuelle	Déclencher une action dans une nouvelle vue	Afficher un sélecteur de valeur
Normal
Pressé
Désactivé

Sélecteur de valeur

Une fois que le sélecteur de valeur a été ouvert, vous aurez besoin d'au moins un bouton sur le panneau de sélection de valeur pour annuler ledit sélecteur de valeur. Ces boutons doivent ressembler à ce qui suit:

Normal	Pressé	Désactivé

Boutons de champ de saisie

Les boutons de champ de saisie sont des boutons associés à un champ de saisie, qui, lorsqu'il est pressé, effectuent une action liée à ce champ de saisie.

Normal	Pressé	Désactivé

Boutons spéciaux

Les boutons spéciaux sont des boutons de style visuels avec des icônes, utilisés à des fins spéciales, telles que l'exploitation de la caméra de l'appareil, répondre et raccrocher le téléphone, et l'activation de la numérotation au clavier. Vous pouvez bien sûr trouver d'autres utilisations pour ce style de bouton.