1. Accueil  
  2. Composantes  
  3. Action  
  4. Boutons

Boutons

Les boutons indiquent les actions qui peuvent être exécutées sur une page. Le libellé d’un bouton annonce l'action qui se produit lorsque l'utilisateur interagit avec celui-ci. 

Quatre types de boutons sont disponibles : les boutons principaux, les boutons secondaires, les boutons tertiaires et les boutons d’avertissement. 

Les variantes « boutons de navigation » et  « boutons avec icône »  sont aussi disponibles.

Exemple

PrincipalSecondaireTertiaireAvertissement


Quand l'utiliser

Les boutons (souvent appelés « appel à l'action ») sont utilisés pour attirer l’attention sur des actions ou des tâches possibles, comme faire une demande d’aide financière, confirmer un paiement ou télécharger un document.

Ils sont généralement placés dans l’interface utilisateur à ces endroits :

  • Boîtes de dialogue modales
  • Formulaires
  • Barres d'outils

On n’utilise pas le bouton pour des raisons esthétiques.

On ne l'utilise pas non plus lorsqu’il n’encourage pas une action ou une tâche : le lien hypertexte convient amplement pour cela.

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).

Bouton secondaire

Ce bouton correspond à une action secondaire ou à une option (par exemple, « Refuser » et « Accepter »).

Bouton tertiaire

Ce bouton correspond aux actions ou aux tâches moins importantes (par exemple, annuler, faire un retour, etc.).

Bouton d’avertissement

Le bouton d'avertissement est conçu pour inciter les utilisateurs à prendre une décision réfléchie. Utilisez les boutons d'avertissement seulement pour les actions ayant des conséquences destructrices qui ne peuvent pas être annulées par un utilisateur (par exemple, supprimer définitivement un compte).

Comment l'utiliser

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

Bouton principal

Insérez un bouton principal par page. Le bouton principal doit être utilisé pour représenter la fonction souhaitée ou la fonction la plus fréquente. Selon les besoins, il peut être accompagné de boutons secondaires ou tertiaires.

Bouton secondaire

On peut utiliser un ou plusieurs boutons secondaires. Dans le contenu d’une page, le bouton secondaire est généralement utilisé lorsqu’un bouton principal est présent, notamment dans les formulaires.

Bouton tertiaire

L’ajout de plusieurs boutons tertiaires sur une page est possible.

Bouton d’avertissement

Idéalement, ce type de bouton devrait déclencher une deuxième validation à l’utilisateur.

Informations techniques

Apparence des libellés

Police de caractère : Open Sans
Taille : 16px / 24px
Graisse : bold (Standard) ou Semibold (Compact)

Positionnement

Dans le format bureau, les boutons qui doivent être regroupés sont placés côte à côte.

Dans le format mobile, les boutons qui doivent être regroupés sont placés côte à côte quand l'espace le permet. Si l'espace est trop restreint en largeur, les boutons se positionnent les uns en dessous des autres.

Exemple de positionnement en format mobile


Ordre

Dans un formulaire, les boutons sont placés en bas du formulaire, alignés à gauche, comme les autres éléments de formulaire (champs textes, boutons radios, cases à cocher, etc.).

L’ordre des boutons doit être motivé par les habitudes des utilisateurs ciblés et par le contexte du contenu. L’ordre pourrait être Principal-Secondaire-Tertiaire, ou Tertiaire-Secondaire-Principal selon le contexte, mais il doit rester le même. Il est important de penser au rendu en format mobile : le manque d’espace pourrait influencer l’ordre des boutons.

Dans une boîte de dialogue modale, les boutons sont placés au bas de la boîte et alignés à droite. Dans ce cas, l’ordre des boutons doit être Tertiaire-Secondaire-Principal.

  

Dimensions

Il existe deux dimensions de boutons : le Standard et le Compact.

Dans le format bureau, les boutons ne peuvent pas occuper toute la largeur de l’espace disponible. Ils doivent respecter la largeur définie par la dimension choisie (Standard ou Compact).

Dans le format mobile, les boutons peuvent occuper toute la largeur de l’espace disponible.

(À noter : le bouton Connexion/Déconnexion présent dans la navigation principale n’est pas soumis à ces normes, étant plus compact encore pour sauver de l’espace en format mobile.)

Standard

Le bouton Standard a un contour de 2 px et son libellé est écrit en Open Sans Bold.

La hauteur du bouton Standard est de 56 px (il est recommandé d’avoir un bouton d’une largeur minimale au moins 2 fois plus grande que la hauteur, donc de 112 px).

Compact

Le bouton Compact a un contour de 1 px et son libellé est écrit en Open Sans Semibold.

La hauteur du bouton Compact est de 40 px (il est recommandé d’avoir un bouton d’une largeur minimale au moins 2 fois plus grande que la hauteur, donc de 80 px).

Espacements

Les espacements du bouton choisi, Standard ou Compact, doivent être respectés.

Standard

Un dégagement intérieur de 24 px de chaque côté et de 16 px en haut et en bas doit se trouver entre le libellé et le contour du bouton qu’il occupe.

Lorsque des boutons sont placés sur une même ligne, une gouttière de 32 px doit se trouver entre chaque.

Lorsque des boutons sont placés un en dessous de l’autre, une gouttière de 24 px doit se trouver entre chaque.

Compact

Un dégagement intérieur de 16 px de chaque côté et de et de 8 px en haut et en bas doit se trouver entre le libellé et le contour du bouton qu’il occupe.

Lorsque des boutons sont placés sur une même ligne, une gouttière de 24 px doit se trouver entre chaque.

Lorsque des boutons sont placés un en dessous de l’autre, une gouttière de 16 px doit se trouver entre chaque.

Styles

Il existe 2 styles de boutons : les boutons rectangulaires et les boutons arrondis. Lorsqu’un style est sélectionné, il doit être appliqué à la totalité des boutons du site ou de l’application.

Boutons rectangulaires : les coins ne sont pas arrondis (border-radius: 0px).

Boutons arrondis : les coins sont arrondis de 4 px (border-radius: 4px).

L’arrondissement des coins des boutons ne peut pas avoir d’autres valeurs que celles mentionnées ci-haut.

Les boutons aux coins complètement arrondis (border-radius: 28px, par exemple) sont interdits.

RectangulaireArrondi

À ne pas faire


Complètement arrondi


  

Variantes

Boutons de navigation

Dans un formulaire ou un processus séquentiel, les boutons de navigation « Précédent » et « Suivant » peuvent être utilisés. Ils sont identiques aux boutons avec icône. La seule différence est que l’icône du bouton « Suivant » est placée à droite du libellé.

 PrécédentSuivant 

Boutons avec icône

Une icône peut être placée à gauche du libellé pour clarifier une action et attirer l'attention sur un bouton. L’icône doit correspondre aux détails de la fiche Iconographie (à venir).

L’icône utilisée dans les boutons doit être directement liée à l'action que l'utilisateur entreprend.

Les boutons avec icône doivent toujours avoir un libellé textuel. L’icône doit toujours apparaître à gauche du libellé, sauf dans le cas du bouton de navigation « Suivant », qui a une flèche à droite du libellé, et du bouton qui ouvre une nouvelle fenêtre, qui a une icône de lien externe à droite du libellé.

L’espace entre l’icône et le texte est de 8 px.

L’icône a une taille maximale de 16 px par 16 px. L’icône est de la même couleur que le libellé textuel.

L'icône et le libellé textuel sont regroupés. Ce groupe icône-libellé reste centré dans le bouton.

 Activer les notifications

Boutons inactifs

Le bouton inactif peut être un obstacle à l’accessibilité et à l’utilisabilité : il n'est pas reconnu par les outils d’assistance vocale et il n'indique pas à l'utilisateur ce qui doit être fait pour poursuivre la tâche en cours.

D’autres approches sont recommandées pour éviter l’utilisation d’un bouton inactif :

  • conserver le bouton à l’état actif en indiquant clairement à l’utilisateur les éléments à corriger ou à compléter avant de poursuivre sa tâche;
  • afficher le bouton actif seulement lorsque la tâche en cours est complétée.

  

États

L’exemple « Actif » montre les états par défaut, au survol (:hover), appuyé (:active) et au focus (:focus).

Bouton principal

Exemple

Actif


<a href="javascript:void(0)" class="btn btn-primary">
  Actif
</a>

.btn {
    font-family: "Open Sans";
    font-size: 16px;
    font-weight: bold;
          /* si Compact font-weight: 600; */
    line-height: 24px;
    display: inline-block;
    box-sizing: border-box;
    min-width: 112px;
          /* si Compact min-width: 80px; */
    padding: 14px 22px;
          /* si Compact padding: 7px 15px; */
    transition: all 0.24s ease-in-out;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    border: 2px solid transparent;
          /* si Compact border: 1px solid transparent; */
    border-radius: 0;
          /* si Arrondi border-radius: 4px; */
}

.btn.btn-primary {
    color: #fff;
    border-color: #095797;
    background-color: #095797;
    box-shadow: 0 1px 4px rgba(34, 54, 84, 0.16);
}

.btn.btn-primary:hover {
    border-color: #156bb2;
    background-color: #156bb2;
}

.btn.btn-primary:focus {
    border-color: #223654;
    background-color: #156bb2;
    box-shadow: 
        0 2px 8px rgba(34, 54, 84, 0.16),
        0 0 0 2px #4a98d9;
}

.btn.btn-primary:active {
    border-color: #3783c9;
    background-color: #3783c9;
}

Bouton secondaire

Exemple

Actif


<a href="javascript:void(0)" class="btn btn-secondary">
  Actif
</a>

.btn.btn-secondary {
    color: #095797;
    border-color: #095797;
}
.btn.btn-secondary:hover {
    background-color: rgba(9, 87, 151, 0.16);
}
.btn.btn-secondary:focus {
    border-color: #223654;
    background-color: rgba(9, 87, 151, 0.16);
    box-shadow: 0 0 0 2px #4a98d9;
}
.btn.btn-secondary:active {
    background-color: rgba(9, 87, 151, 0.08);
}

Bouton tertiaire

Exemple

Actif


<a href="javascript:void(0)" class="btn btn-tertiary">
  Actif
</a>

.btn.btn-tertiary {
    color: #095797;
}
.btn.btn-tertiary:hover {
    text-decoration: underline;
    background-color: rgba(197, 202, 210, 0.24);
}
.btn.btn-tertiary:focus {
    border-color: #223654;
    background-color: rgba(197, 202, 210, 0.24);
    box-shadow: 0 0 0 2px #4a98d9;
}
.btn.btn-tertiary:active {
    background-color: rgba(197, 202, 210, 0.16);
}

Bouton d'avertissement

Exemple

Actif


<a href="javascript:void(0)" class="btn btn-danger">
  Actif
</a>

.btn.btn-danger {
    color: #fff;
    border-color: #cb381f;
    background-color: #cb381f;
}
.btn.btn-danger:hover {
    border-color: #b52e16;
    background-color: #b52e16;
}
.btn.btn-danger:focus {
    border-color: #223654;
    background-color: #b52e16;
    box-shadow: 0 0 0 2px #4a98d9;
}
.btn.btn-danger:active {
    border-color: #eb705a;
    background-color: #eb705a;
}

Couleurs inversées

Un bouton sur fond foncé doit être en couleur inversée.

Les exemples «Option 1» et «Option 2» montrent les états par défaut, au survol (:hover), appuyé (:active) et au focus (:focus).

Exemple


<!-- Boutons principaux -->

<a href="javascript:void(0)" class="btn btn-primary option-1">
  Option 1
</a>

<a href="javascript:void(0)" class="btn btn-primary option-2">
  Option 2
</a>
 

<!-- Boutons secondaires -->

<a href="javascript:void(0)" class="btn btn-secondary option-1">
  Option 1
</a>

<a href="javascript:void(0)" class="btn btn-secondary option-2">
  Option 2
</a>
 

<!-- Boutons tertiaires -->

<a href="javascript:void(0)" class="btn btn-tertiary option-1">
  Option 1
</a>

<a href="javascript:void(0)" class="btn btn-tertiary option-2">
  Option 2
</a>
 

<!-- Boutons d'avertissement -->

<a href="javascript:void(0)" class="btn btn-danger option-1">
  Option 1
</a>

/*** Boutons principaux ***/

 

.btn.btn-primary.option-1 {
    color: #223654;
    border-color: #ffffff;
    background-color: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.btn.btn-primary.option-2 {
    color: #223654;
    border-color: #89bce5;
    background-color: #89bce5;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.btn.btn-primary.option-1:hover,
.btn.btn-primary.option-2:hover {
    border-color: #b8d7ef;
    background-color: #b8d7ef;
}
.btn.btn-primary.option-1:focus,
.btn.btn-primary.option-2:focus {
    border-color: #223654;
    background-color: #b8d7ef;
    box-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.16), 
        0 0 0 2px #4a98d9;
}
.btn.btn-primary.option-1:active,
.btn.btn-primary.option-2:active {
    border-color: #f0f6fc;
    background-color: #f0f6fc;
}

 

/*** Boutons secondaires ***/

 

.btn.btn-secondary.option-1 {
    color: #ffffff;
    border-color: #ffffff;
}

.btn.btn-secondary.option-2 {
    color: #89bce5;
    border-color: #89bce5;
}

.btn.btn-secondary.option-1:hover
.btn.btn-secondary.option-2:hover {
    background-color: rgba(218, 230, 240, 0.08);
}
.btn.btn-secondary.option-1:focus,
.btn.btn-secondary.option-2:focus {
    border-color: #223654;
    background-color: rgba(218, 230, 240, 0.08);
    box-shadow: 0 0 0 2px #4a98d9;
}
.btn.btn-secondary.option-1:active,
.btn.btn-secondary.option-2:active {
    background-color: rgba(218, 230, 240, 0.16);
}

 

/*** Boutons tertiaires ***/

 

.btn.btn-tertiary.option-1 {
    color: #ffffff;
}

.btn.btn-tertiary.option-2 {
    color: #89bce5;
}

.btn.btn-tertiary.option-1:hover,
.btn.btn-tertiary.option-2:hover {
    text-decoration: underline;
    background-color: rgba(197, 202, 210, 0.16);
}
.btn.btn-tertiary.option-1:focus,
.btn.btn-tertiary.option-2:focus {
    border-color: #223654;
    background-color: rgba(197, 202, 210, 0.16);
    box-shadow: 0 0 0 2px #4a98d9;
}
.btn.btn-tertiary.option-1:active,
.btn.btn-tertiary.option-2:active {
    background-color: rgba(197, 202, 210, 0.24);
}

 

/*** Boutons d'avertissement ***/

 

.btn.btn-danger.option-1 {
    color: #223654;
    border-color: #e9806f;
    background-color: #e9806f;
}
.btn.btn-danger.option-1:hover {
    border-color: #efa598;
    background-color: #efa598;
}
.btn.btn-danger.option-1:focus {
    border-color: #223654;
    background-color: #efa598;
    box-shadow: 0 0 0 2px #4a98d9;
}
.btn.btn-danger.option-1:active {
    border-color: #f6cec7;
    background-color: #f6cec7;
}

À consulter aussi

Dernière mise à jour : 24 novembre 2021