Bouton ProConnect

Depuis la version 1.15 du DSFR, le bouton ProConnect est intégré nativement via la classe modificatrice fr-connect--pro.

Par défaut

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

Code

= dsfr_proconnect_button(target: "#")

Résultat

Qu’est-ce que ProConnect ? 

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

Code

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

Résultat

Qu’est-ce que ProConnect ? 

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

Plus d’informations