Tag / Badge

Kleines Label für Kategorien, Status, Neuigkeiten und Badges. Sechs semantische Farbvarianten und zwei Größen. Tags sind inline-Elemente und können direkt in Teaser, Cards oder Tabellen eingesetzt werden.

Varianten

Jede Variante kommuniziert eine bestimmte Bedeutung. Primary hebt hervor, Success bestätigt eine positive Aktion, Destructive signalisiert eine Warnung oder einen Fehler, Outline ist dezent und sticht nicht aus dem Fließtext heraus.

Alle Farbvarianten

Standard Oekostrom Gastarif Aktiv Gestoert Archiviert

<Tag>Standard</Tag>
<Tag variant="primary">Oekostrom</Tag>
<Tag variant="secondary">Gastarif</Tag>
<Tag variant="success">Aktiv</Tag>
<Tag variant="destructive">Gestoert</Tag>
<Tag variant="outline">Archiviert</Tag>

Größen

sm ist die kompakte Variante für beengte Bereiche wie Tabellenzellen oder Teaser-Header. md ist der Standard für den allgemeinen Einsatz.

Klein und Standard

Neu (sm) Neu (md) Aktiv (sm) Aktiv (md)

<Tag variant="primary" size="sm">Neu (sm)</Tag>
<Tag variant="primary" size="md">Neu (md)</Tag>
<Tag variant="success" size="sm">Aktiv (sm)</Tag>
<Tag variant="success" size="md">Aktiv (md)</Tag>

Typische Anwendung: Förderantrag-Status

Tags werden häufig in Kombination mit anderen Inhalten eingesetzt – zum Beispiel um den Status eines Förderantrags oder einer ÖPNV-Störungsmeldung anzuzeigen.

Status-Badges in einer Liste

Solar-Förderung (Nr. 48221) Bewilligt

Wärmepumpen-Antrag (Nr. 29017) In Bearbeitung

Altantrag Förderung (Nr. 11044) Abgelehnt

<div class="flex items-center justify-between">
  <span>Solar-Förderung (Nr. 48221)</span>
  <Tag variant="success" size="sm">Bewilligt</Tag>
</div>
<div class="flex items-center justify-between">
  <span>Wärmepumpen-Antrag (Nr. 29017)</span>
  <Tag variant="outline" size="sm">In Bearbeitung</Tag>
</div>
<div class="flex items-center justify-between">
  <span>Altantrag Förderung (Nr. 11044)</span>
  <Tag size="sm">Abgelehnt</Tag>
</div>

Installation

cp-components add tag