Composant

Badges & Alertes

Les badges signalent un état court (nouveau, bêta, succès…). Les alertes communiquent un message plus détaillé, avec une couleur sémantique.

Badges

Défaut Bêta Succès Attention Erreur 
<span class="lumy-badge">Défaut</span>
<span class="lumy-badge lumy-badge--beta">Bêta</span>
<span class="lumy-badge lumy-badge--success">Succès</span>
<span class="lumy-badge lumy-badge--warning">Attention</span>
<span class="lumy-badge lumy-badge--danger">Erreur</span>
HTML

Alerte d'information

ℹ️

Index en cours de synchronisation

Les résultats peuvent varier légèrement pendant la mise à jour.

<div class="lumy-alert">
    <span>ℹ️</span>
    <div>
        <p class="lumy-alert__title">
            Index en cours de synchronisation
        </p>
        <p class="lumy-alert__content">
            Les résultats peuvent varier légèrement pendant la mise à jour.
        </p>
    </div>
</div>
HTML

Variantes sémantiques

✅

Feedback transmis

Votre signalement a bien été envoyé à l'équipe technique.

⚠️

Connexion instable

Le module Aura Engine répond plus lentement que prévu.

⛔

Recherche impossible

Aucun résultat n'a été trouvé pour cette requête.

<div class="lumy-alert lumy-alert--success">…</div>
<div class="lumy-alert lumy-alert--warning">…</div>
<div class="lumy-alert lumy-alert--danger">…</div>
HTML

Accessibilité

  • Les alertes critiques peuvent recevoir role="alert" pour être annoncées immédiatement.
  • Ne pas se fier uniquement à la couleur : garder une icône et un intitulé texte.