dsfr_button
Génère un <button type="button"> au DSFR.
Usage basique
<%= f.dsfr_button "Action" %><button name="button" type="button" class="fr-btn">Action</button>Options disponibles
| Option | Type | Description |
|---|---|---|
class: | String | Classes CSS additionnelles (variantes, icônes, tailles) |
disabled: | Boolean | Désactive le bouton |
data: | Hash | Attributs data-* |
type: | String | Type du bouton (défaut: "button") |
Classes de variantes DSFR
| Classe | Description |
|---|---|
fr-btn--secondary | Style secondaire |
fr-btn--tertiary | Style tertiaire |
fr-btn--tertiary-no-outline | Tertiaire sans bordure |
fr-btn--sm | Petite taille |
fr-btn--lg | Grande taille |
fr-btn--icon-left | Icône à gauche |
fr-btn--icon-right | Icône à droite |
Bouton secondaire
<%= f.dsfr_button "Action secondaire", class: "fr-btn--secondary" %><button name="button" type="button" class="fr-btn fr-btn--secondary">Action secondaire</button>Bouton tertiaire
<%= f.dsfr_button "Action tertiaire", class: "fr-btn--tertiary" %><button name="button" type="button" class="fr-btn fr-btn--tertiary">Action tertiaire</button>Tailles
<%= f.dsfr_button "Petit", class: "fr-btn--sm" %>
<%= f.dsfr_button "Moyen (défaut)" %>
<%= f.dsfr_button "Grand", class: "fr-btn--lg" %><button name="button" type="button" class="fr-btn fr-btn--lg">Grand</button>Avec icône
<%= f.dsfr_button "Télécharger", class: "fr-btn--icon-left fr-icon-download-line" %><button name="button" type="button" class="fr-btn fr-btn--icon-left fr-icon-download-line">Télécharger</button>Icône seule
<%= f.dsfr_button "", class: "fr-btn--icon fr-icon-add-line", title: "Ajouter" %><button name="button" type="button" class="fr-btn fr-btn--icon fr-icon-add-line" title="Ajouter"></button>Bouton désactivé
<%= f.dsfr_button "Désactivé", disabled: true %><button name="button" type="button" disabled="disabled" class="fr-btn">Désactivé</button>Avec bloc (contenu personnalisé)
<%= f.dsfr_button(class: "fr-btn--icon-left fr-icon-arrow-right-line") { "Continuer" } %><button name="button" type="button" class="fr-btn fr-btn--icon-left fr-icon-arrow-right-line">Continuer</button>Avec attributs data
<%= f.dsfr_button "Confirmer", data: { action: "click->modal#open", turbo: false } %><button name="button" type="button" data-action="click->modal#open" data-turbo="false" class="fr-btn">Confirmer</button>