Button
Le bouton est un élément d’interaction avec l’interface permettant à l’utilisateur d’effectuer une action.
Boutons de niveaux différents
Le rendu par défaut d’un bouton. Le bouton secondaire est utilisé lorsque l’action est moins prioritaire que l’action principale, comme réinitialiser les valeurs d’un formulaire. Le bouton tertiaire est réservé pour des actions contextuelles ou alternatives : fermeture de modale, annuler, réinitialiser, partager, suivre sur un réseau social, copier un lien.
Code
= dsfr_button(label: "Valider")
= dsfr_button(label: "Valider", level: :secondary)
= dsfr_button(label: "Valider", level: :tertiary)Résultat
<button class="fr-btn">
Valider
</button>
<button class="fr-btn fr-btn--secondary">
Valider
</button>
<button class="fr-btn fr-btn--tertiary">
Valider
</button>Bouton désactivé
L’état désactivé 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.
Code
= dsfr_button(label: "Valider", html_attributes: { disabled: true })Résultat
<button class="fr-btn" disabled="disabled">
Valider
</button>Bouton avec icône
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)
La position de l’icône peut être changée en ajoutant la classe fr-btn--icon-right à votre bouton.
Code
= dsfr_button(label: "Valider", icon: "checkbox-circle-line")
= dsfr_button(label: "Valider", icon: "checkbox-circle-line", icon_position: :right)Résultat
<button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left">
Valider
</button>
<button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-right">
Valider
</button>Bouton uniquement avec icône
Limitez l’usage des boutons à icône seule. 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). Ce button doit contenir un libellé, qui sera ainsi lu par les assistants. L’attribut title reprenant l’intitulé du bouton peut être ajouté pour permettre l’affichage d’une infobulle.
Code
= dsfr_button(icon: "checkbox-circle-line", html_attributes: { title: "Valider" })Résultat
<button class="fr-btn fr-icon-checkbox-circle-line" title="Valider">
</button>Boutons de tailles différentes
La taille medium (:md) est la taille de bouton par défaut.
Les tailles :md et :lg sont à utiliser en priorité.
La taille :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.
Code
= dsfr_button(label: "Valider", size: :sm)
= dsfr_button(label: "Valider", size: :lg)Résultat
<button class="fr-btn fr-btn--sm">
Valider
</button>
<button class="fr-btn fr-btn--lg">
Valider
</button>