Système de Design de l’État

Boutons - Buttons

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

Pour la navigation entre une page et un autre contenu au sein de la même page, du même site ou externe, préférez un lien.

Structure

Les boutons sont composés de :

  • Un label - obligatoire.

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

Bouton primaire

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.

Le bouton primaire est caractérisé par le fond de couleur $background-action-high-blue-france.

1 2 3 <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.

Bouton secondaire

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

Le bouton secondaire est caractérisé par un fond transparent et un contour $border-action-high-blue-france.

1 2 3 <button class="fr-btn fr-btn--secondary"> Label bouton </button>

Bouton tertiaire

Le bouton tertiaire est réservé pour des actions contextuelles ou alternatives : fermeture de modale, annuler, réinitialiser, partager, suivre sur un réseau social, copier un lien.

Rappel : le bouton est utilisé pour déclencher une action alors que le lien est utiliser pour naviguer (au sein de la page, vers une autre page).

Le bouton tertiaire est caractérisé par un fond transparent et soit une absence de contour, soit un contour $border-default-grey.
La présence ou non de contour gris ne doit pas indiquer de hiérarchie entre deux boutons tertiaire.

 

1 2 3 4 5 6 <button class="fr-btn fr-btn--tertiary"> Label bouton </button> <button class="fr-btn fr-btn--tertiary-no-outline"> Label bouton </button>


État désactivé

L'état désactivé indique que l'utilisateur ne 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

Bouton secondaire 

Bouton tertiaire

1 2 3 4 5 6 7 8 9 10 11 <button class="fr-btn" disabled> Bouton primaire désactivé </button> <button class="fr-btn fr-btn--secondary" disabled> Bouton secondaire désactivé </button> <button class="fr-btn fr-btn--tertiary" 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 de l’icône ( voir la documentation des icônes . 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. Ils peuvent être utilisés uniquement pour les actions récurrentes, et facilement identifiable (ex : engrenage pour les paramètres ou loupe pour la recherche).

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 <!-- 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> <!-- Bouton tertiaire (avec et sans contour) icône à gauche--> <button class="fr-btn fr-btn--tertiary fr-fi-checkbox-circle-line fr-btn--icon-left"> Label bouton </button> <button class="fr-btn fr-btn--tertiary fr-btn--tertiary-no-outline fr-btn-fr-fi-checkbox-circle-line fr-btn--icon-left"> Label bouton </button> <!-- Bouton tertiaire (avec et sans contour) icône à droite--> <button class="fr-btn fr-btn--tertiary fr-fi-checkbox-circle-line fr-btn--icon-right"> Label bouton </button> <button class="fr-btn fr-btn--tertiary fr-btn--tertiary-no-outline fr-fi-checkbox-circle-line fr-btn--icon-right"> Label bouton </button> <!-- Bouton tertiaire (avec et sans contour) 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--tertiary fr-fi-checkbox-circle-line" title="Label bouton"> Label bouton </button> <button class="fr-btn fr-btn--tertiary fr-btn--tertiary-no-outline fr-fi-checkbox-circle-line" title="Label bouton"> Label bouton </button>

Tailles

Les boutons primaires, secondaires et tertiaires 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).

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!-- 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 tertiaire.

  • 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 du DSFR.

Accessibilité

  • Il est nécessaire de bien différencier les boutons des liens : un bouton permet de déclencher une action alors qu'un lien est utilisé pour la navigation (interne ou externe à la page).

  • Le contraste entre la couleur de fond du bouton et du texte doit être de 4.5:1. Merci de porter une attention particulière à ce critère quand vous utilisez les boutons secondaires et tertiaires qui ont un fond transparent.

  • 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 supprimé.


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.

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 :

Service d'Information du Gouvernement - 2021