Tag
Un court libellé indiquant le statut d'un élément : à l'heure, en retard, hors service.
Sur cette page
Playground
En retard
État
Taille
Fond
<span class="feitio-tag"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg>En retard</span>Quand l'utiliser
- Pour le statut d'un élément dans un tableau, une liste ou un titre.
Quand ne pas l'utiliser
- Pour quelque chose de cliquable : une balise n'est ni bouton ni lien.
- Avoir l'attention (« Nouveau », « En vedette » partout) : c'est le « bruyant ».
- Pour une notification : Notification.
Exemples
DraftOnlineLateDown
Les quatre
Neutre, succès, avertissement et erreur, toujours avec la ligne autour, afin qu'il ne disparaisse pas sur un écran faible. Jamais orange, toujours avec icône et mot.
Afficher le code
<span class="feitio-tag" data-status="warn">
<svg class="feitio-icon" aria-hidden="true">…</svg>Atrasado
</span>Reactprochainement
Petit
À côté d'un nom dans une liste ou un menu, lorsque la taille régulière serait trop lourde : le « prochainement » de ce site dans la navigation en est un exemple.
Afficher le code
<span class="feitio-tag" data-size="small">em breve</span>Faire et ne pas faire
Do
Late
Un mot, avec icône : lisible de loin et sans couleur.
Don’t
Tard
Orange, toutes lettres, un pilule parfaite et sans icône.
Écriture
- Un ou deux mots, un adjectif ou un état (« À l'heure », « Tard »).
Accessibilité
- Le mot est le statut ; l'icone suit (
aria-hidden).
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
class="feitio-tag" | obligatoire | L'étiquette. |
data-status | aucune, "ok", "warn", "error" | Neutre (sans attribut), succès, avertissement ou erreur. |
data-size="small" | optionnel | Le petit, à côté d'un nom dans une liste. |