Bouton FranceConnect

Le bouton FranceConnect fait partie du DSFR et son CSS est inclus nativement (classes fr-connect, fr-connect__login et fr-connect__brand).

La variante FranceConnect+ s’obtient avec l’option use_plus_version: true, qui ajoute la classe fr-connect--plus et adapte le lien d’information vers la page dédiée à FranceConnect+.

Par défaut

Dans son implémentation la plus simple, le bouton POST sur l’attribut target:.

Code

= dsfr_france_connect_button(target: "#")

Résultat

Qu’est-ce que FranceConnect ? 

<div class="fr-connect-group">
  <form class="button_to" method="post" action="#">
    <button class="fr-connect" data-turbo="false" type="submit">
      <span class="fr-connect__login">
        S’identifier avec
      </span>
      <span class="fr-connect__brand">
        FranceConnect
      </span>
    </button>
  </form>
  <p>
    <a target="_blank" rel="noopener" title="Qu’est-ce que FranceConnect ? - nouvelle fenêtre" href="https://www.franceconnect.gouv.fr/">
      Qu’est-ce que FranceConnect ?
    </a>
  </p>
</div>

FranceConnect+

Avec use_plus_version: true, le bouton devient un bouton FranceConnect+.

Code

= dsfr_france_connect_button(target: "#", use_plus_version: true)

Résultat

Qu’est-ce que FranceConnect+ ? 

<div class="fr-connect-group">
  <form class="button_to" method="post" action="#">
    <button class="fr-connect fr-connect--plus" data-turbo="false" type="submit">
      <span class="fr-connect__login">
        S’identifier avec
      </span>
      <span class="fr-connect__brand">
        FranceConnect
      </span>
    </button>
  </form>
  <p>
    <a target="_blank" rel="noopener" title="Qu’est-ce que FranceConnect+ ? - nouvelle fenêtre" href="https://www.franceconnect.gouv.fr/franceconnect-plus/">
      Qu’est-ce que FranceConnect+ ?
    </a>
  </p>
</div>

Surcharge du bouton

Si vous devez configurer le bouton au delà de l’implémentation par défaut, vous pouvez utiliser button_overrides:

Code

= dsfr_france_connect_button(target: "#", button_overrides: { class: "fr-foobar", method: :get })

Résultat

Qu’est-ce que FranceConnect ? 

<div class="fr-connect-group">
  <form class="button_to" method="get" action="#">
    <button class="fr-connect fr-foobar" data-turbo="false" type="submit">
      <span class="fr-connect__login">
        S’identifier avec
      </span>
      <span class="fr-connect__brand">
        FranceConnect
      </span>
    </button>
  </form>
  <p>
    <a target="_blank" rel="noopener" title="Qu’est-ce que FranceConnect ? - nouvelle fenêtre" href="https://www.franceconnect.gouv.fr/">
      Qu’est-ce que FranceConnect ?
    </a>
  </p>
</div>

Plus d’informations