Boutons
Les boutons permettent à l’utilisateur d’exécuter des actions sur une page. Le texte du bouton indique clairement ce qui se passe lorsqu’on clique dessus.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Variantes disponibles
Voici les variantes de boutons disponibles :
- Bouton principal : pour l’action principale de la page.
- Bouton secondaire : pour une action complémentaire.
- Bouton tertiaire : pour les actions moins importantes.
- Bouton d’avertissement : pour les actions destructrices ou irréversibles.
- Bouton inactif : bouton non fonctionnel.
Quand l’utiliser
Utiliser un bouton pour mettre en évidence une action ou une tâche précise (ex. : confirmer un paiement, soumettre un formulaire, télécharger un document).
Éviter de multiplier les boutons sur une même page. Trop de choix nuisent à la clarté de l’interface et à la prise de décision.
Emplacements courants : dialogue modal, formulaire, barre d’outils, etc.
Voici des indications sur les contextes d’utilisation selon les variantes :
- Bouton principal : Représente l’action la plus importante. Un seul par page, sauf pour les boutons de navigation.
- Bouton secondaire : Complète le bouton principal (ex. : « Refuser », « Annuler »). Peut exister seul ou en complément.
- Bouton tertiaire : Actions secondaires ou contextuelles. Plusieurs peuvent apparaître.
- Bouton d’avertissement : Réservé aux actions destructrices (ex. : suppression). Doit être utilisé avec prudence et, si possible, suivi d’une confirmation.
- Bouton inactif : À éviter dans la plupart des cas. Consulter le passage dédié à ce type de bouton dans la section « Comportements ».
Quand ne pas l’utiliser
On n’utilise pas un bouton à des fins purement esthétiques ou lorsqu’aucune action n’est attendue. Dans ce cas, privilégiez un lien hypertexte.
Anatomie
- Libellé
- Zone cliquable
- Icône
Optionnelle
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Libellé
Obligatoire, même en présence d’une icône.
Doit être court, précis et décrire l’action. Consulter la fiche Libellés des boutons du guide de rédaction pour plus de précision.
Icône
L’icône est facultative. Si elle est ajoutée, elle doit être directement liée à l’action. De plus, elle doit respecter les règles définies dans la fiche Iconographie.
Tous les boutons avec icône doivent inclure un libellé textuel.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Boutons (complets)
Positionnement et alignement : En format bureau, les boutons regroupés sont disposés côte à côte. En format mobile, ils peuvent aussi être disposés côte à côte si l’espace le permet, sinon ils peuvent être placés un en dessous de l’autre. Dans un formulaire, les boutons sont alignés en bas à gauche et leur ordre est selon le contexte utilisateur (ex. : Principal → Secondaire → Tertiaire). Dans un dialogue modal, suivent un ordre particulier ; consulter la fiche pour les indications.
Dimensions : En format bureau, la largeur des boutons est déterminée par le libellé, jusqu’à un maximum de 360 px. En format mobile, ils peuvent occuper toute la largeur de l’écran. La hauteur dépend du format choisi, c’est-à-dire format Standard (56 px) ou format Compact (40 px).
Espacements : L’espacement entre les boutons varie selon leur disposition et leur format. En disposition horizontale, il est de 32 px pour le format Standard et de 24 px pour le format Compact. En disposition verticale, il est de 24 px pour le format Standard et de 16 px pour le format Compact.
Icône
Positionnement et alignement : Alignée à gauche du libellé (ou à droite pour « Suivant » ou lien externe).
Styles
Cette section présente les styles disponibles et documentés pour le composant.
Coins rectangulaires ou arrondis
Deux styles de coins sont disponibles :
- Rectangulaire : les quatre coins arrondis à 0 px)
- Arrondi : les quatre coins arrondis à 4 px)
Tous les autres arrondis sont interdits.
Lorsqu’un style est choisi, il doit être appliqué pour l’ensemble des boutons du site Web ou de l’application.
Sur arrière-plan foncé
Pour les boutons placés sur un fond sombre, utiliser les styles du Thème sombre.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Boutons (complets)
Le bouton exécute une action dès qu’il est activé. Son apparence doit refléter son état (normal, survolé, cliqué ou désactivé) pour guider l’utilisateur. Il doit être visible, accessible et réactif.
Bouton d’avertissement
Devrait être suivi d’une confirmation en utilisant un dialogue modal, par exemple.
Boutons inactifs
À éviter. Il n’informe pas l’utilisateur sur l’action attendue.
D’autres approches sont recommandées :
- Laisser le bouton actif avec un message d’erreur clair.
- Rendre le bouton actif seulement lorsque la condition est remplie.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Clic : déclenche l’action.
- Survol : état :hover visible.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Tab : navigation.
- Entrée ou Espace : activation du bouton.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
À consulter aussi
Dernière mise à jour : 16 janvier 2026