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

Données 

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

Résultat

Données 

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

Résultat

Données 

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

Résultat

Données 

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

Résultat