Badge

Indicateur visuel pour les valeurs numériques telles que les notifications et les scores.

Anatomie

Le composant badge est composé de plusieurs éléments dont certains ne sont visibles qu'en fonction du style choisi.

Conteneur

Valeur

Halo (dépendant du style avec pulsation) facultatif

Badge circulaire

Les badges sans texte sont des badges circulaires affichés flottants sur un bouton, une icône ou d'autres éléments de navigations, tels que les onglets.

Exemples d'usage d'un badge circulaire :

Sur un bouton

Sur un bouton d'icône

Sun un onglet

Sur un menu

Badge textuel

Les badges textuels sont utilisés pour afficher de la donnée texte.

Badge numérique

Les badges numériques sont utilisés pour afficher des données numériques, comme le nombre de notifications non lues.

Variantes

Il existe cinq variantes différentes disponibles pour les badges :

Défaut - Default

Affiche des informations de base attirant subtilement l'attention.

Neutre - Neutral

Transmet des informations générales sans provoquer de forte distinction visuelle.

Danger - Danger

Indique des situations critiques ou d'urgence, nécessitant une action immédiate.

Avertissement - Warning

Attire l'attention sur des éléments nécessitant une prudence ou une vérification supplémentaire.

Succès - Success

Signale des réussites, confirmations ou accomplissements positifs.

Pulsation

L'effet pulsé du badge viendra apporter un dynamisme qui attirera l'attention de l'utilisateur sur cet élément.

Numérique

Textuel

Circulaire

L’effet pulsé doit s’arrêter automatiquement au bout de 5 secondes maximum.