Communications numériques gouvernementales Beta

Système de design gouvernemental

Boutons

Les boutons indiquent les actions qui peuvent être exécutées sur une page. Trois types de boutons sont disponibles.

Bouton principal
Ce bouton correspond à la tâche principale, c’est-à-dire à l’action la plus importante de la page (par exemple, trouver un médecin de famille). On recommande d’utiliser un seul bouton de ce type. Selon les besoins, il peut être accompagné de boutons secondaires ou tertiaires.

Bouton secondaire
Ce bouton correspond à une action secondaire ou à une option (par exemple, « Refuser » et « Accepter »). On peut en utiliser un ou plusieurs.

Bouton tertiaire
Ce bouton correspond aux tâches liées aux fonctions logistiques du système (par exemple, sauvegarder des données, fermer une fenêtre, se déconnecter, faire un retour, etc.). On ne met pas l’accent sur ces fonctions, puisqu’elles ne devraient pas être essentielles pour accomplir la tâche principale.

Exemple

Principal SecondaireTertiaire


Quand les utiliser

Les boutons sont utilisés pour attirer l’attention sur des actions possibles. Par exemple, on peut les utiliser pour indiquer que la tâche principale doit être effectuée sur un site externe de Québec.ca.

On n’utilise pas les boutons pour des raisons esthétiques. On ne les utilise pas non plus pour inviter les personnes à consulter des contenus complémentaires : le lien hypertexte convient pour ce dernier cas.

Comment l'utiliser

Le libellé des boutons est court et précis : il est constitué d’un verbe à l’infinitif et peut être suivi d’un complément de 1 à 4 mots, incluant les déterminants et les prépositions. Si le verbe est pronominal, il se construit toujours avec le pronom personnel se (ou s’).

Exemples :

  • Commencer
  • Envoyer
  • Annuler
  • Réinitialiser
  • Remplir la demande
  • S’inscrire
  • S’abonner à l’infolettre
  • Se connecter
  • S’inscrire au guichet

Formulations à ne pas utiliser :

  • Je veux m’abonner !
  • Consultez notre rapport annuel
  • Oui, j’accepte la politique de confidentialité

Les libellés doivent tenir sur une ligne dans le format bureau.

Évitez d’utiliser plusieurs boutons sur une page. Une surcharge de boutons réduit leur impact et peut être une source de confusion.

Dans le cas du formulaire, les boutons sont placés dans le coin inférieur gauche.

Si un bouton principal est combiné à un bouton secondaire ou tertiaire, le bouton principal est celui qui sera le plus à droite.

Des boutons qui ont des fonctions distinctes doivent présenter des visuels distincts. Le bouton principal doit être utilisé pour représenter la fonction souhaitée ou la fonction la plus fréquente. Évitez de placer deux boutons principaux l’un à côté de l’autre.

À faire


Refuser Accepter


À ne pas faire


RefuserAccepter


Informations techniques

Dimensions

Largeur minimale : 156 px

Espace de dégagement

Un dégagement horizontal et vertical de 16 px doit se trouver entre le libellé et le contour du bouton qu’il occupe.

Une gouttière de 30 px doit se trouver entre les boutons placés sur une même ligne.

Libellé du bouton

Police de caractère : Open Sans
Taille : 16 px/1 rem
Graisse : gras

État des boutons

Le bouton principal est plein, avec une ombre portée. Il peut être combiné à un bouton secondaire ou à un bouton tertiaire.

Exemple


CSS bouton principal - défaut
Background-color : #095797
Border : 2px solid #095797
Box-shadow : 0.1rem 0.1rem 7px #c4c8ce

CSS bouton principal - survol
Background-color : #156bb2
Border : 2px solid #095797
Box-shadow : 0.1rem 0.1rem 7px #c4c8ce

CSS bouton principal - focus
Background-color : #156bb2
Border : 2px solid #223654
Box-shadow : 0.1rem 0.1rem 7px #c4c8ce

Le bouton secondaire est sur fond blanc, avec un trait contour bleu. Il peut être combiné à un bouton principal.

Exemple


CSS bouton secondaire - défaut
Background-color : #ffffff
Border : 2px solid #095797

CSS bouton secondaire - survol
Background-color : #095797
Border : 2px solid #095797

CSS bouton secondaire - focus
Background-color : #ffffff
Border : 2px solid #223654

Le bouton tertiaire est en texte seulement. Il peut être combiné à un bouton principal.

Exemple


CSS bouton tertiaire - défaut
Color : #095797
Text-decoration : none

CSS bouton tertiaire - survol
Color : #095797
Text-decoration : underline

CSS bouton tertiaire - focus
Color : #095797
Text-decoration : underline

Dernière mise à jour : 14 janvier 2020