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
• Voir la page du composant sur Storybook 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

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

Badge simple

Exemple 2

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

Petit badge

Exemple 3

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

Badge coloré

Exemple 4

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

Badge système