Boutons - Buttons

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

Structure

Les boutons sont composés de :

  • Un label - obligatoire.

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

 

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.

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.



 

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

 

État inactif

L'état inactif 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 

1 2 3 4 5 6 7 <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 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 <!-- 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).

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

  • 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 :