Badge

• Voir la page de documentation du composant sur le Système de Design de l’État Ouvre une nouvelle fenêtre
• Voir la page d’exemple du Système de Design de l’État Ouvre une nouvelle fenêtre

Documentation du tag

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

data_dict = {
    "label": "Label of the button item",
    "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-badge--sm: small-sized badge
• fr-badge--green-menthe other color codes: change the color of the badge
• fr-badge--success (or error/info/warning/new): system badges
• fr-badge--no-icon: removes the icon on system badges

Tag name: dsfr_badge

Usage: {% dsfr_badge data_dict %}

Exemples

Exemple 1

{'extra_classes': '', 'label': 'Badge simple'}

Badge simple

Exemple 2

{'extra_classes': 'fr-badge--sm', 'label': 'Petit badge'}

Petit badge

Exemple 3

{'extra_classes': 'fr-badge--green-menthe', 'label': 'Badge coloré'}

Badge coloré

Exemple 4

{'extra_classes': 'fr-badge--success', 'label': 'Badge système'}

Badge système