Boutons: Système de conception de Canada.ca

  • Dernière modification : 2021-01-20

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 :

  • aider une personne à amorcer ou à mener à bien une transaction (un bouton « Se connecter », par exemple);
  • invoquer une fonction, commme « Partager cette page »;
  • offrir un ensemble permanent de commandes d’interface utilisateur dans une série de page, par exemple « précédent », « suivant », ou « retour à la table des matières »

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 (bêta)

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 :

  • présenter une demande à un programme ou à un service
  • lancer un calculateur
  • débuter une série de questions interactives
  • trouver un clinique

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 de connexion - Bêta

Quand l'utiliser : Ajouter un bouton de connexion contextuel uniforme sur les pages où se connecter à un compte est une tâche importante. Utilisez l'étiquette « Se connecter ».

Remarque : vous devrez utiliser du code CSS personnalisé pour utiliser ce bouton pour le moment.

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

<div class="pull-right">
	<button class="provisional btn btn-login">Se connecter</button>
</div>
								
CSS

.provisional.btn-login {
	background-color: #26374a;
	border: 1px solid #26374a;
	border-radius: 0;
	color: #fff;
	font-weight: 600;
	font-size: 17px;
	margin-top: 0px;
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 16px;
	padding-right: 16px;
}

.provisional.btn-login:hover {
	background-color: #444;
	border-color: #444;
}

@media screen and (min-width:479px) {
   .provisional.btn-login {
      margin-right: 15px;
   }
}
								

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 classe 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

Ajout d'une nouvelle version bêta d'un bouton de connexion uniforme.

Discussion

Discutez de cette configuration dans GitHub

Date de modification :