Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Le bouton est un élément d’interaction avec l’interface permettant à l’utilisateur d’effectuer une action.

 

Table of Contents

Structure

Les boutons sont composés de :

  • un Un label - obligatoire.

  • une Une icône, pouvant être modifiée (voir les icônes disponibles) - optionnelle.

Boutons primaires

Le bouton primaire est utilisé pour les actions principales comme soumettre un formulaire ou rediriger vers un contenu que l’on souhaite prioriser dans le parcours utilisateur.

Html macro
<link href="https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1.css" rel="stylesheet">

<div class="fr-p-1w" style="text-align:center">
<button class="fr-btn" >
 Label bouton
</button>
</div>
Html macro
<link href="https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1.css" rel="stylesheet">

<div class="fr-p-1w" style="text-align:center">
<button class="fr-btn" >
 Label bouton
</button>
</div>

<script> var html = document.querySelector('html'); console.log(html); html.setAttribute('data-fr-theme','dark'); </script>

Code Block
languagehtml
<button class="fr-btn">
    Label bouton
</button>


Usages :

  • Il est nécessaire de bien différencier les boutons des liens. Un bouton permet de déclencher une action dans la même page. Un lien permet à votre utilisateur de naviguer à l'intérieur (ou à l’extérieur) de votre site (ex : retour en arrière, en savoir plus, fil d’Ariane) ou de se déplacer dans la page (ancre).

  • Pour être efficace et hiérarchiser les actions proposées à l’utilisateur, limiter l'usage du bouton primaire à 1 par écran et n'utilisez jamais deux boutons primaires côte à côte. Vous pouvez aligner un bouton primaire avec un bouton secondaire ou lien.

Boutons secondaires

Le bouton secondaire est utilisé lorsque l’action est moins prioritaire que l'action principale, comme réinitialiser les valeurs d’un formulaire.


Html macro
<link href="https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1.css" rel="stylesheet">

<div class="fr-p-1w" style="text-align:center">
<button class="fr-btn fr-btn--secondary" >
 Label bouton
</button>
</div>
Html macro
<link href="https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1.css" rel="stylesheet">

<div class="fr-p-1w" style="text-align:center">
<button class="fr-btn fr-btn--secondary" >
 Label bouton
</button>
</div>


<script> var html = document.querySelector('html'); console.log(html); html.setAttribute('data-fr-theme','dark'); </script>

Code Block
languagehtml
<button class="fr-btn fr-btn--secondary">
    Label bouton
</button>

 

État inactif

L'état inactif indique que l'utilisateur ne peux peut pas interagir avec le bouton. Il ne doit être utilisé que très ponctuellement. Par exemple, lorsqu’on veut indiquer à l’utilisateur qu’il doit procéder à une action en amont.

Bouton primaire

Html live preview
version9
{"htmlCode":"\n<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1.css\" rel=\"stylesheet\">\n\n<div class=\"fr-p-1w\" style=\"text-align:center\">\n<button class=\"fr-btn\" disabled>\n Label bouton\n</button>\n</div>\n\n\n</div>\n"}
Html live preview
version10
{"htmlCode":"\n<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1.css\" rel=\"stylesheet\">\n\n<div class=\"fr-p-1w\" style=\"text-align:center\">\n<button class=\"fr-btn\" disabled>\n Label bouton\n</button>\n</div>\n\n\n</div>\n</div>\n<script> var html = document.querySelector('html'); console.log(html); html.setAttribute('data-fr-theme','dark'); </script>\n"}

Bouton secondaire 

Html live preview
version5
{"htmlCode":"\n<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1.css\" rel=\"stylesheet\">\n\n<div class=\"fr-p-1w\" style=\"text-align:center\">\n<button class=\"fr-btn fr-btn--secondary\" disabled>\n Label bouton\n</button>\n</div>\n\n\n</div>\n\n"}
Html live preview
version6
{"htmlCode":"\n<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1.css\" rel=\"stylesheet\">\n\n<div class=\"fr-p-1w\" style=\"text-align:center\">\n<button class=\"fr-btn fr-btn--secondary\" disabled>\n Label bouton\n</button>\n</div>\n\n\n</div>\n<script> var html = document.querySelector('html'); console.log(html); html.setAttribute('data-fr-theme','dark'); </script>\n"}
Code Block
languagehtml
<button class="fr-btn" disabled>
  Bouton primaire désactivé
</button>

<button class="fr-btn fr-btn--secondary" disabled>
   Bouton secondaire désactivé
</button>

Boutons avec icônes

Il est possible d'ajouter une icône à votre bouton permettant une meilleure compréhension de l’action. Pour cela il suffit d’utiliser la classe css CSS de l’icône ( voir la documentation des icônes (blue star). Trois déclinaisons sont possibles, pour les boutons primaires et secondaires :

  • avec icône à droite

  • avec icône à gauche

  • icône seule : limitez l’usage de ces boutons. Il Ils peuvent être utiliser utilisés uniquement pour pour les actions récurrentes, et facilement identifiable (ex : engrenage pour les paramètres ou loupe pour la recherche).

Html live preview
version1011
{"htmlCode":"\n<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1dsfrv2106.css\" rel=\"stylesheet\">\n\n\n\n<div class=\"fr-p-1w\" style=\"text-align:center\">\n\n    <button class=\"fr-btn fr-fi-checkbox-circle-line fr-btn--icon-left\">\n        Label bouton\n    </button>\n    <button class=\"fr-btn fr-fi-checkbox-circle-line fr-btn--icon-left fr-btn--secondary\" >\n        Label bouton\n    </button>\n    <br>\n    <br>\n    <button class=\"fr-btn fr-fi-checkbox-circle-line fr-btn--icon-right\">\n        Label bouton\n    </button>\n    <button class=\"fr-btn fr-fi-checkbox-circle-line fr-btn--icon-right fr-btn--secondary\">\n        Label bouton\n    </button>\n    <br>\n    <br>\n    <button class=\"fr-btn fr-fi-checkbox-circle-line fr-btn--icon\" title=\"Label bouton\">\n        Label bouton\n    </button>\n    <button class=\"fr-btn fr-fi-checkbox-circle-line fr-btn--icon fr-btn--secondary\" title=\"Label bouton\">\n        Label bouton\n    </button>\n\n</div>\n\n"}
Html live preview
version911
{"htmlCode":"\n<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1dsfrv2106.css\" rel=\"stylesheet\">\n\n\n\n<div class=\"fr-p-1w\" style=\"text-align:center\">\n\n    <button class=\"fr-btn fr-fi-checkbox-circle-line fr-btn--icon-left\" title=\"Label bouton MD\">\n        Label bouton MD\n    </button>\n    <button class=\"fr-btn fr-fi-checkbox-circle-line fr-btn--icon-left fr-btn--secondary\" title=\"Label bouton MD\">\n        Label bouton MD\n    </button>\n    <br>\n    <br>\n    <button class=\"fr-btn fr-fi-checkbox-circle-line fr-btn--icon-right\" title=\"Label bouton MD\">\n        Label bouton MD\n    </button>\n    <button class=\"fr-btn fr-fi-checkbox-circle-line fr-btn--icon-right fr-btn--secondary\" title=\"Label bouton MD\">\n        Label bouton MD\n    </button>\n    <br>\n    <br>\n    <button class=\"fr-btn fr-fi-checkbox-circle-line fr-btn--icon\" title=\"Label bouton MD\">\n    <span class=\"sr-onlyLabel bouton\">\n        Label bouton MD\n    </span>\n    </button>\n    <button class=\"fr-btn fr-fi-checkbox-circle-line fr-btn--icon fr-btn--secondary\" title=\"Label bouton MD\">\n    <span class=\"sr-only\">\n        Label bouton MD\n    </span>\n    </button>\n\n</div>\n\n\n\n\n\n<script> var html = document.querySelector('html'); console.log(html); html.setAttribute('data-fr-theme','dark'); </script>\n\n"}

Code Block
languagehtml
<!-- Bouton primaire icône à gauche-->

<button class="fr-btn fr-fi-checkbox-circle-line fr-btn--icon-left">
    Label bouton
</button>

<!-- Bouton primaire icône à droite-->

<button class="fr-btn fr-fi-checkbox-circle-line fr-btn--icon-right">
    Label bouton
</button>

<!-- Bouton primaire icône seule
    L'attribut title reprenant l'intitulé du bouton peut être ajouté pour
    permettre l'affichage d'une infobulle.
-->

<button class="fr-btn  fr-fi-checkbox-circle-line" title="Label bouton">
   Label bouton
</button>


<!-- Bouton secondaire icône à gauche-->

<button class="fr-btn fr-btn--secondary fr-fi-checkbox-circle-line fr-btn--icon-left">
   Label bouton
</button>

<!-- Bouton secondaire icône à droite-->

<button class="fr-btn fr-btn--secondary fr-fi-checkbox-circle-line fr-btn--icon-right">
   Label bouton
</button>

<!-- Bouton secondaire icône seule
    L'attribut title reprenant l'intitulé du bouton peut être ajouté pour
    permettre l'affichage d'une infobulle.
-->

<button class="fr-btn fr-btn--secondary fr-fi-checkbox-circle-line" title="Label bouton">
   Label bouton
</button>

Tailles

Les boutons primaires et secondaires sont disponibles en 3 tailles :

  • SM pour Small, MD pour Medium, LG pour large

  • La taille medium (MD) est la taille de bouton par défaut

  • Les formats MD et LG sont à utiliser en priorité

  • Le format SM pourra être utilisé pour créer certains composants, évitez de l’utiliser en mobile car la zone de “touch” sur écran tactile n’est pas suffisante.

Il est possible de modifier la taille des boutons à l'aide de classes spécifiques (modifiers) à ajouter à la classe principale. La classe .fr-btn--lg permet par exemple d'obtenir la taille “Large” (LG), .fr-btn--sm la taillle “Small” (SM).

Html live preview
version9
{"htmlCode":"\n<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1.css\" rel=\"stylesheet\">\n\n\n<div class=\"fr-p-1w\" style=\"text-align:center\">\n    <button class=\"fr-btn fr-btn--sm fr-fi-checkbox-line fr-btn--icon-left\"> \n        Label bouton SM\n    </button>\n    <button class=\"fr-btn fr-btn--sm fr-fi-checkbox-line fr-btn--icon-left fr-btn--secondary\"> \n        Label bouton SM\n    </button>\n    <br>\n    <br>\n    <button class=\"fr-btn fr-fi-checkbox-line fr-btn--icon-left\">\n        Label bouton MD (défaut)\n    </button>\n    <button class=\"fr-btn fr-fi-checkbox-line fr-btn--icon-left fr-btn--secondary\">\n        Label bouton MD (défaut)\n    </button>\n    <br>\n    <br>\n    <button class=\"fr-btn fr-btn--lg fr-fi-checkbox-line fr-btn--icon-left\">\n        Label bouton LG\n    </button>\n    <button class=\"fr-btn fr-btn--lg fr-fi-checkbox-line fr-btn--icon-left fr-btn--secondary\">\n        Label bouton LG\n    </button>\n</div>"}
Html live preview
version8
{"htmlCode":"\n<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1.css\" rel=\"stylesheet\">\n\n\n<div class=\"fr-p-1w\" style=\"text-align:center\">\n    <button class=\"fr-btn fr-btn--sm fr-fi-checkbox-line fr-btn--icon-left\"> \n        Label bouton SM\n    </button>\n    <button class=\"fr-btn fr-btn--sm fr-fi-checkbox-line fr-btn--icon-left fr-btn--secondary\"> \n        Label bouton SM\n    </button>\n    <br>\n    <br>\n    <button class=\"fr-btn fr-fi-checkbox-line fr-btn--icon-left\">\n        Label bouton MD (défaut)\n    </button>\n    <button class=\"fr-btn fr-fi-checkbox-line fr-btn--icon-left fr-btn--secondary\">\n        Label bouton MD (défaut)\n    </button>\n    <br>\n    <br>\n    <button class=\"fr-btn fr-btn--lg fr-fi-checkbox-line fr-btn--icon-left\">\n        Label bouton LG\n    </button>\n    <button class=\"fr-btn fr-btn--lg fr-fi-checkbox-line fr-btn--icon-left fr-btn--secondary\">\n        Label bouton LG\n    </button>\n</div>\n<script> var html = document.querySelector('html'); console.log(html); html.setAttribute('data-rf-theme','dark'); </script>"}
Code Block
languagehtml
<!-- bouton au format SM -->

<button class="fr-btn fr-btn--sm fr-fi-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">
   Label bouton SM
</button>

<!-- bouton au format MD / taille par défaut -->

<button class="fr-btn fr-fi-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">
   Label bouton MD (défaut)
</button>

<!-- bouton au format LG -->

<button class="fr-btn fr-btn--lg fr-fi-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">
   Label bouton LG
</button>

Règles d’utilisation

Usages

  • Il est nécessaire de bien différencier les boutons des liens. Un bouton permet de déclencher une action dans la même page. Un lien permet à votre utilisateur de naviguer à l'intérieur (ou à l’extérieur) de votre site (ex : retour en arrière, en savoir plus, fil d'Ariane) ou de se déplacer dans la page (ancre).

  • Pour être efficace et hiérarchiser les actions proposées à l’utilisateur, limiter l'usage du bouton primaire à 1 par écran et n'utilisez jamais deux boutons primaires côte à côte. Vous pouvez aligner un bouton primaire avec un bouton secondaire ou lien.

  • La couleur bleu du bouton ne peut pas être modifiée : cette couleur est utilisée et sanctuarisée pour signaler une interaction sur les éléments principaux (cf. couleurs (blue star)) du DSFR.

Accessibilité

  • Il est nécessaire de bien différencier les boutons des liens. Lorsque l'action déclenchée agit sur la page elle-même il faut utiliser un bouton.

  • Le contraste entre la couleur de fond du bouton et du texte doit être de 4.5:1.

  • Les libellés doivent être explicites.

  • L’utilisation de l’attribut title (ou aria-label) doit être utilisé uniquement si l’intitulé du bouton n’est pas explicite (ce qui n’est pas recommandé).

  • Pour aria-label, la valeur utilisée doit reprendre l'intitulé visible (indispensable pour les utilisateurs en commande vocale).

  • Le focus (propriété outline) ne doit être ni dégradé ni supprimsupprimé.


Dans le cas d'un bouton “icône seule”, les règles spécifiques sont les suivantes :

  • Ajouter un attribut title contenant la fonction du bouton.

  • Vérifier que la couleur de l'icône est suffisamment contrastée (rapport de 3:1) par rapport à la couleur du fond du bouton.

  • Si le bouton utilise plusieurs icônes de couleur différente pour symboliser plusieurs états, assurez-vous que le rapport de contraste entre les différentes couleurs est de 3:1 au moins.

Contenus

Le libellé de bouton doit

  • commencer par un verbe, de préférence d’action qui exprime clairement ce qui va se passer pour l’utilisateur.

  • être court et compréhensible facilement : utiliser 3 mots maximum.

Il faut utiliser le même format d'écriture sur tout vos libellé de boutons (Exemple : 1ère lettre en majuscule, le reste en minuscule, impératif).

Personnalisation

Le style de ce composant n’est pas personnalisable.
Toutefois, certains éléments sont optionnels et les icônes peuvent être changées - voir la structure du composant.

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :