# Tag

Eine kurze Beschriftung für den Status eines Elements: pünktlich, verspätet, ausfallen.

## Playground

```html
<span class="feitio-tag"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg>Verspätet</span>
```

## Wann verwenden

-   Für einen Elementstatus in einer Tabelle, einer Liste oder einem Überschriftsbereich.

## Wann nicht verwenden

-   **Für etwas anklickbares:** ein Tag ist weder Button noch Link.
-   **Aufmerksamkeit erregen** ("Neu", "Hervorgehoben" überall): das ist der "lärmige".
-   **Für eine Benachrichtigung:** Notice.

## Beispiele

### Vier

Neutral, success, warning und error, immer mit dem Rahmen darum, damit es auf einem schwachen Monitor nicht verschwindet. Nie orange, immer mit Icon und Wort.

Code anzeigen

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

### Klein

Neben einem Namen in einer Liste oder im Menü, wenn die reguläre Größe zu schwer wäre: das "soon" dieser Seite in der Navigation ist eins.

Code anzeigen

```html
<span class="feitio-tag" data-size="small">em breve</span>
```

## Do and don't

Do

Late

Eins Wort, mit Icon: von weitem lesbar und ohne Farbe.

Don’t

Zu spät

Orange, alle Großbuchstaben, eine perfekte Kapsel und kein Icon.

## Schreiben

-   Eins oder zwei Wörter, ein Adjektiv oder ein Zustand ("Pünktlich", "Zu spät").

## Barrierefreiheit

-   Das Wort ist der Status; das Icon geht mit (`aria-hidden`).

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-tag"`

erforderlich

Der Tag.

`data-status`

none, `"ok"`, `"warn"`, `"error"`

Neutral (keine Attribute), success, warning oder error.

`data-size="small"`

optional

Der kleine, neben einem Namen in einer Liste.