Boutons FranceConnect et ProConnect
Les boutons FranceConnect et ProConnect sont des éléments d’interaction avec l’interface proposant à l’usager de se connecter à un service via un compte appelé fournisseur d’identité (type impots.gouv.fr , ameli.fr , l’Identité Numérique La Poste , France Identité , etc.).
Le service sur lequel l’usager se connecte récupère auprès de FranceConnect et/ou ProConnect un identifiant technique unique ainsi que des données d’identité vérifiées par l’INSEE qui permettent de garantir l’authentification de l’usager.
Retrouver le détail de leurs fonctionnements et conditions d’éligibilité ici : https://franceconnect.gouv.fr et https://www.proconnect.gouv.fr/
HTML
Structure du composant
Les composants Bouton FranceConnect et ProConnect permettent de proposer une connexion en utilisant l’identité numérique d’un fournisseur agréé. Leur structure est la suivante :
-
Un élément
<div>de classefr-connect-groupcontient le bouton FranceConnect ou ProConnect et un lien d'information.-
Le bouton FranceConnect ou ProConnect est un élément HTML
<button>défini par la classefr-connect. Il doit contenir deux éléments<span>:-
Un texte de connexion "S'identifier avec", un
<span>avec la classefr-connect__login. Ce texte peut être traduit mais ne doit pas être modifié. -
L'intitulé du service "FranceConnect" ou "ProConnect",
un
<span>avec la classefr-connect__brand.
-
Un texte de connexion "S'identifier avec", un
-
Le bouton doit être accompagné d'un lien d'information. Il
s'agit d'un élément
<p>contenant un lien<a>vers le service dédié.- Le lien doit être ouvert dans une nouvelle fenêtre.
- L'intitulé du lien peut être traduit mais ne doit pas être modifié.
-
Le bouton FranceConnect ou ProConnect est un élément HTML
Pour plus de clarté, le bouton FranceConnect peut être accompagné de la phrase : « FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion à vos services en ligne ».
Structure HTML du bouton FranceConnect
<div class="fr-connect-group">
<button class="fr-connect" type="button">
<span class="fr-connect__login">S’identifier avec</span>
<span class="fr-connect__brand">FranceConnect</span>
</button>
<p>
<a href="https://franceconnect.gouv.fr/" target="_blank" rel="noopener" title="Qu’est-ce que FranceConnect ? - nouvelle fenêtre">Qu’est-ce que FranceConnect ?</a>
</p>
</div>Structure HTML du bouton FranceConnect+
<div class="fr-connect-group">
<button class="fr-connect fr-connect--plus" type="button">
<span class="fr-connect__login">S’identifier avec</span>
<span class="fr-connect__brand">FranceConnect</span>
</button>
<p>
<a href="https://franceconnect.gouv.fr/france-connect-plus" target="_blank" rel="noopener" title="Qu’est-ce que FranceConnect+ ? - nouvelle fenêtre">Qu’est-ce que FranceConnect+ ?</a>
</p>
</div>Structure HTML du bouton ProConnect
<div class="fr-connect-group">
<button class="fr-connect fr-connect--pro" type="button">
<span class="fr-connect__login">S’identifier avec</span>
<span class="fr-connect__brand">ProConnect</span>
</button>
<p>
<a href="https://proconnect.gouv.fr/" target="_blank" rel="noopener" title="Qu’est-ce que ProConnect ? - nouvelle fenêtre">Qu’est-ce que ProConnect ?</a>
</p>
</div>CSS
Installation du CSS
Pour fonctionner correctement le style CSS du composant et de ses
dépendances doivent être importés. L'import doit se faire avant le
contenu de la page dans la partie
<head>, et de
préférence avec les fichiers minifiés, car plus légers.
Il est possible d'importer les fichiers CSS avec un niveau de granularité adapté à vos besoins. Voir le découpage des fichiers CSS du DSFR dans la documentation dédiée .
| Dépendance | Obligatoire |
|---|---|
| Core | Oui |
| Connect | Oui |
Exemple d'imports CSS
<link href="dist/core/core.min.css" rel="stylesheet">
<link href="dist/component/connect/connect.min.css" rel="stylesheet">Une version standalone du bouton FranceConnect est également disponible, permettant de l'utiliser en dehors du DSFR. Ce fichier CSS comprend le minimum requis du core du DSFR et le style du bouton FranceConnect.
<link href="standalone/component/connect/connect.standalone.min.css" rel="stylesheet">Variantes de style
Le composant Bouton FranceConnect ou ProConnect est stylisé par les classes CSS suivantes :
-
.fr-connect-group: Conteneur du bouton et du lien d'information. -
.fr-connect: Bouton FranceConnect ou ProConnect. -
.fr-connect__login: Texte "S'identifier avec". -
.fr-connect__brand: Intitulé du service -
.fr-connect-group p: Conteneur du lien d'information. -
.fr-connect-group a: Lien d'information.
Une classe supplémentaire peut être ajoutée au bouton pour proposer une connexion via un autre service :
-
.fr-connect--plus: FranceConnect+. -
.fr-connect--pro: ProConnect.
JavaScript
La documentation technique pour la mise en place du service souhaité peut être consultée sur leur site dédié :
Note de version
Voir les évolutions sur github
v1.15.0 - 17 juillet 2026
ajout du bouton proConnect
-
Ajout de la variante
fr-connect--proet mise à jour de la documentation
#1388
v1.11.1 - 31 janvier 2024
v1.11.0 - 11 décembre 2023
taille de la fonte adapatable
-
Le bouton FranceConnect doit répondre aux critères
d’accessibilité qui redéfinissent le
letter-spacing et la taille de fonte.
- Passage des valeurs de tailles et d'espacements en 'em' pour les rendre relatives à la taille de fonte du bouton
-
Retrait du '+' de 'FranceConnect+' dans
l'intitulé de
fr-connect__brand. Celui-ci est désormais placé en contenu du pseudo-élément after du bouton
#813
v1.8.0 - 27 octobre 2022
v1.5.0 - 21 avril 2022
v1.4.1 - 29 mars 2022
v1.4.0 - 16 mars 2022
Contenu associé
Bouton
Présentation du composant Bouton permettant à l’usager d’exécuter une action dans une interface numérique.
Page de connexion
Cette page présente le modèle standardisé de page de connexion à utiliser pour l’accès à un espace personnel d’un service public, incluant FranceConnect, identifiants et recommandations d’accessibilité.
Page de création de compte
Cette page décrit le modèle de création de compte à utiliser dans les services numériques de l’État en précisant les composants obligatoires, les règles d’intégration, les bonnes pratiques d’accessibilité et les étapes recommandées.
