Boutons

Documentation du tag

Returns a button item. Takes a dict as parameter, with the following structure:

data_dict = {
    "label": "Label of the button item",
    "onclick": "button action",
    "type": "(Optional) type of button (submit or button - default: submit),
    "name": "(Optional) name of the button",
    "is_disabled": "(Optional) boolean that indicate if the button is activated
    (default: False)",
    "extra_classes": "(Optional) string with names of extra classes."
}

All of the keys of the dict can be passed directly as named parameters of the tag.

Relevant extra_classes:

  • fr-btn--secondary: secundary button
  • fr-btn--tertiary: tertiary button
  • fr-btn--tertiary-no-outline: tertiary button with no outline
  • fr-btn--icon-left and fr-btn--icon-right: add an icon to the button (associated with an icon class)
  • fr-btn--sm and fr-btn--lg: button smaller or larger than the default size

Tag name: dsfr_button

Usage: {% dsfr_button data_dict %}

Exemples

Exemple 1 

{'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"}

Exemple 2 

{'label': 'Bouton secondaire', 'name': 'secundary-button', 'type': 'button', 'extra_classes': 'fr-btn--secondary', 'onclick': "alert('Vous avez cliqué sur le bouton secondaire')"}

Exemple 3 

{'label': 'Bouton tertiaire', 'extra_classes': 'fr-btn--tertiary', 'onclick': "alert('Vous avez cliqué sur le bouton tertiaire')"}

Exemple 4 

{'label': 'Bouton tertiaire sans bordure', 'type': 'button', 'extra_classes': 'fr-btn--tertiary-no-outline', 'onclick': "alert('Vous avez cliqué sur le bouton tertiaire sans bordure')"}