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 :
- 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. 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 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 ».
- Présentation du bouton contextuel « Se connecter » (Blogue)
- Conseils sur le bouton contextual « Se connecter »
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 :
|
| 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 :