Sélection de la langue

Recherche


Boutons: Système de conception de Canada.ca

  • Dernière modification : 2022-09-23

Les boutons sont des objets cliquables incitant une personne à exécuter une action.

Sur cette page

Quand utiliser cette configuration

Utiliser cette configuration pour exécuter des mesures ou des commandes qui modifieront l’état du système en aval ou en amont (par exemple « Ajouter un commentaire », « Soumettre », « Envoyer »).

Utiliser des boutons pour :

Quoi éviter

Ne pas utiliser de bouton lorsqu'un lien de texte ordinaire fera tout autant l’affaire, comme lorsqu’on fournit un simple lien unique vers une autre page.

Utiliser les boutons pour activer des commandes de système, ou pour attirer l’attention sur des actions importantes sur la page. Limitez leur utilisation pour éviter que leur efficacité visuelle en soit diminuée.

Comment mettre en oeuvre

Utiliser le bon type bouton:

  1. Super tâche
  2. Primaire
  3. Secondaire
  4. Danger
  5. Lien
  6. Se connecter

1. Bouton de super-tâche

Quand l'utiliser : utiliser un bouton de super-tâche pour lancer la tâche principale ou l'étape suivante que les personnes tentent d'accomplir à partir d'une page spécifique, par exemple :

Vous pouvez aussi l'utiliser dans la Page d'accueil institutionnelle lorsqu'il existe des preuves qu'une tâche principale particulière (une super-tâche) est clairement la plus importante.

Quoi éviter : ne pas utiliser de bouton de super-tâche pour promouvoir quelque chose qui n'est pas la tâche principale que les gens recherchent sur cette page. Pour les promotions, utilisez plutôt des Promotions contextuelles ou une Bannière promotionnelle .

Ne pas utiliser plus d'un bouton de super-tâche par page.

Code
<button class="btn btn-call-to-action">Calculer combien vous pourriez recevoir</button>

2. Bouton primaire

Quand l'utiliser : utiliser les boutons primaires pour les actions qu'une personne est susceptible d'effectuer sur cette page, comme passer à la page suivante ou pour un bouton de soumission dans un formulaire.

Quoi éviter : ne pas utiliser plus d'un bouton primaire par page.

Code
<button class="btn btn-primary">Soumettre</button>

3. Bouton secondaire

Quand l'utiliser : utiliser des boutons secondaires pour les options alternatives, moins importantes ou moins susceptibles d'être utilisées, comme le bouton "précédent" dans un formulaire.

Code
<button class="btn btn-default">Précédent</button>

4. Bouton danger

Quand l'utiliser : Utiliser les boutons danger pour attirer l'attention sur une action qui pourrait avoir des conséquences, comme supprimer un formulaire ou quitter une application authentifiée.

Quoi éviter : ne pas utiliser de bouton danger à moins que ce soit absolument nécessaire.

Code
<button class="btn btn-danger">Effacer le formulaire</button>

5. Bouton lien

Quand l'utiliser : Utiliser les boutons liens pour les options peu utilisées, par exemple pour redémarrer un assistant ou une calculatrice. Les boutons liens ont une zone cible légèrement plus grande que les liens réguliers.

Code
<button class="btn btn-link">Redémarrer le calculateur</button>

6. Bouton contextuel « Se connecter »

Quand l'utiliser : Le bouton contextuel « Se connecter » est un élément facultatif de l’en-tête global . À utiliser sur les pages où la connexion à un compte est une tâche importante. Utiliser l’étiquette « Se connecter ».

Un bouton carré bleu en haut à droite de l'écran pour se connecter à un compte

Modifications des boutons

Option Description Comment mettre en oeuvre
Pleine largeur Faire en sorte qu'un bouton occupe toute la largeur de sa colonne. Ajouter la classe btn-block au bouton
Boutons groupés Grouper les côte à côte pour les contrôles comme les les boutons qui permettent de basculer d'un état à un autre. Entourer les boutons groupés d'un div avec la classe btn-group .
Changer la taille Modifier la taille des boutons pour améliorer la visibilité d'un appel à l'action ou pour gagner de la place dans les conceptions tels que boutons qui permettent de basculer d'un état à un autre. Ajouter les classes suivantes au bouton :
  • Grand: btn-lg
  • Petit: btn-sm
  • Très petit: btn-xs
Désactiver le bouton Mettre un bouton en gris pour qu'il ne soit pas cliquable. En général, il est préférable de supprimer le bouton plutôt que de le désactiver. Ajouter la classe disabled au button.

Recherche et blogue

Derniers changements

Lignes directrices plus détaillées pour le bouton contextuel « Se connecter »
Ajout d'une nouvelle version bêta du bouton contextuel « Se connecter »

Détails de la page

Date de modification :