Conseils
Utilisez un bouton lorsque vous voulez que l’utilisateur effectue une action. Les boutons doivent cependant être employés avec modération, car une utilisation excessive nuit à leur visibilité. Si vous cherchez à naviguer vers d’autres pages ou vers des ancres sur la même page, utilisez plutôt des liens. Voici quelques exemples de cas où vous pouvez utiliser un bouton :
- Appel à l’action
- Lancer une application ou un service
- Naviguer dans un formulaire et le soumettre
- Enregistrer ou supprimer des données
- Lancer une fenêtre contextuelle ou modale
- Télécharger ou téléverser un fichier
- Consentement aux conditions d’utilisation
Alignement et ordre de tri
Il est préférable d’aligner les boutons à gauche et de les trier de gauche à droite par ordre d’importance. De cette façon, le regard des utilisateurs se posera d’abord sur l’action principale à effectuer. Comme l’anglais et le français se lisent de gauche à droite, les utilisateurs ont tendance à regarder d’abord le côté gauche de l’écran. Si les boutons sont alignés à droite, ils risquent de passer inaperçus.
Sur appareil mobile, les boutons sont empilés du haut vers le bas, par ordre d’importance. Les boutons s’affichent en pleine largeur pour aider les utilisateurs à les atteindre d’une seule main, qu’ils soient gauchers ou droitiers.
États
Les boutons affichent plusieurs états, qui informent l’utilisateur à chaque étape de l’interaction. Ils doivent inclure les états suivants : par défaut, survol, focus, actif et inactif.
- Par défaut : L’état par défaut correspond à l’aspect du bouton en l’absence d’interaction.
- Survol : L’état de survol correspond à l’aspect du bouton lorsque l’utilisateur y passe son curseur. Cet état indique à l’utilisateur que le bouton est interactif.
- Focus : L’état de focus correspond à l’aspect du bouton lorsque l’utilisateur y navigue et y accède à l’aide d’un clavier ou d’un dispositif de pointage. Cet état indique visuellement à l’utilisateur que le bouton est sélectionné et prêt à recevoir une entrée.
- Pressé (actif) : L’état appuyé correspond à l’aspect du bouton lorsque l’utilisateur clique ou appuie sur le bouton. Cet état indique visuellement à l’utilisateur que son action a été enregistrée.
- Désactivé : L’état inactif correspond à l’aspect du bouton lorsqu’il n’est pas cliquable ou interactif. Cet état indique à l’utilisateur que le bouton est actuellement indisponible.
Bouton primaire
Le bouton primaire correspond à la tâche principale, c’est-à-dire à l’action la plus importante que doit accomplir l’utilisateur. Il s’agit du bouton le plus visible et le plus mis en valeur. Il est recommandé de n’utiliser qu’un seul bouton primaire par écran.
HTML
<!-- Utilisez <button> s'il fait quelque chose, <a> s'il mène quelque part -->
<button type="button" class="gnb-btn">Bouton</button>
<a href="#" class="gnb-btn">Lien</a>
Bouton secondaire
Le bouton secondaire correspond à une action moins importante ou a une option offerte à l’utilisateur.
HTML
<!-- Utilisez <button> s'il fait quelque chose, <a> s'il mène quelque part -->
<button type="button" class="gnb-btn-secondary">Bouton secondaire</button>
<a href="#" class="gnb-btn-secondary">Bouton secondaire</a>
Bouton tertiaire
Le bouton tertiaire correspond aux actions les moins importantes.
HTML
<!-- Utilisez <button> s'il fait quelque chose, <a> s'il mène quelque part -->
<button type="button" class="gnb-btn-tertiary">Bouton tertiaire</button>
<a href="#" class="gnb-btn-tertiary">Bouton tertiaire</a>
Bouton primaire critique
Les boutons primaires critique doivent seulement être utilisés si l’action principale a des conséquences destructrices, comme supprimer définitivement un compte ou des données.
HTML
<!-- Utilisez <button> s'il fait quelque chose, <a> s'il mène quelque part -->
<button type="button" class="gnb-btn-critical">Bouton critique</button>
<a href="#" class="gnb-btn-critical">Bouton critique</a>
Bouton secondaire critique
Les boutons secondaires critique doivent seulement être utilisés si l’action secondaire a des conséquences destructrices, comme supprimer des données ou quitter un processus sans enregistrer les données.
HTML
<!-- Utilisez <button> s'il fait quelque chose, <a> s'il mène quelque part -->
<button type="button" class="gnb-btn-critical-secondary">Secondaire critique</button>
<a href="#" class="gnb-btn-critical-secondary">Secondaire critique</a>
Bouton tertiaire critique
Les boutons tertiaires critique sont réservés aux actions les moins importantes. Ils réduisent l’importance accordée aux conséquences destructrices.
HTML
<!-- Utilisez <button> s'il fait quelque chose, <a> s'il mène quelque part -->
<button type="button" class="gnb-btn-critical-tertiary">Bouton tertiaire critique</button>
<a href="#" class="gnb-btn-critical-tertiary">Bouton tertiaire critique</a>
Bouton démarrer
Le bouton Démarrer est utilisé pour démarrer un processus d’application ou lancer un service en ligne.
HTML
<!-- Utilisez <button> s'il fait quelque chose, <a> s'il mène quelque part -->
<button type="button" class="gnb-btn-success">Commencer maintenant <i class="fa-solid fa-circle-arrow-right"></i></button>
<a class="gnb-btn-success">Commencer maintenant <i class="fa-solid fa-arrow-right"></i></a>
Bouton désactivé
Les boutons inactifs doivent seulement être utilisés lorsque les boutons doivent rester désactivés jusqu’à ce que les utilisateurs terminent une action, comme remplir tous les champs obligatoires d’un formulaire. Les boutons inactifs peuvent être plus difficiles à lire. Il faut donc les éviter dans la mesure du possible. Tous les types de boutons peuvent être désactivés en ajoutant la classe disabled.
HTML
<!-- Utilisez <button> s'il fait quelque chose, <a> s'il mène quelque part -->
<button type="button" class="gnb-btn disabled">Bouton</button>
<a href="#" class="gnb-btn disabled">Lien</a>
Boutons avec icônes
Des icônes peuvent être ajoutées aux boutons pour en illustrer l’action. Les icônes ne doivent pas être utilisées seules, sans texte. Les utilisateurs pourraient les interpréter de multiples façons, ce qui crée de la confusion.
HTML
<button type="button" class="gnb-btn">Télécharger <i class="fa-solid fa-file-arrow-down"></i></button>
Jumelage des boutons pour les interactions
Action principale positive
HTML
<!-- Positif et neutre -->
<button type="button" class="gnb-btn">Positif</button>
<button type="button" class="gnb-btn-secondary">Neutre</button>
<!-- Positif et négatif -->
<button type="button" class="gnb-btn">Positif</button>
<button type="button" class="gnb-btn-critical-secondary">Négatif</button>
<!-- Positif et désactivé -->
<button type="button" class="gnb-btn">Positif</button>
<button type="button" class="gnb-btn-secondary disabled" disabled>Désactivé</button>
Action principale négative
HTML
<button type="button" class="gnb-btn-critical">Négatif</button>
<button type="button" class="gnb-btn-secondary">Neutre</button>
Exemples
HTML
<!-- Suivant et Retour -->
<button type="button" class="gnb-btn">Suivant</button>
<button type="button" class="gnb-btn-secondary">Retour</button>
<!-- Soumettre et Annuler -->
<button type="button" class="gnb-btn">Soumettre</button>
<button type="button" class="gnb-btn-secondary">Annuler</button>
<!-- Supprimer et Annuler -->
<button type="button" class="gnb-btn-critical">Supprimer</button>
<button type="button" class="gnb-btn-secondary">Annuler</button>