# Tag

Un court libellé indiquant le statut d'un élément : à l'heure, en retard, hors service.

## Playground

```html
<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

### 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

```html
<span class="feitio-tag" data-status="warn">
  <svg class="feitio-icon" aria-hidden="true">…</svg>Atrasado
</span>
```

### 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

```html
<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.