Badge Komponente

Die Badge-Komponente zeigt kleine Kennzeichnungen, Status-Indikatoren oder Labels an. Sie ist perfekt für die Kennzeichnung von Versionen, Status oder wichtigen Informationen.

Grundlegende Verwendung

Die einfachste Verwendung der Badge-Komponente:

<Badge>Neu</Badge>

Varianten

Die Badge-Komponente unterstützt verschiedene Varianten für unterschiedliche Kontexte:

Standard Varianten

<Badge variant="default">Standard</Badge>
<Badge variant="primary">Primär</Badge>
<Badge variant="secondary">Sekundär</Badge>
<Badge variant="success">Erfolg</Badge>
<Badge variant="warning">Warnung</Badge>
<Badge variant="danger">Gefahr</Badge>

Größen

Verschiedene Größenoptionen stehen zur Verfügung:

<Badge size="sm">Klein</Badge>
<Badge size="md">Mittel</Badge>
<Badge size="lg">Groß</Badge>

Praktische Beispiele

Versionskennzeichnung

Dieser Endpunkt ist in Version 2.1 verfügbar.

Status-Indikatoren

## Funktionen

- **Benutzerauthentifizierung** <Badge variant="success">Verfügbar</Badge>
- **Datei-Upload** <Badge variant="warning">Beta</Badge>
- **Echtzeitbenachrichtigungen** <Badge variant="danger">Experimentell</Badge>

Neue Funktionen hervorheben

## Dashboard <Badge variant="primary">Neu</Badge>

Das neue Dashboard bietet erweiterte Analysefunktionen.

Badge mit Links

Badges können auch als Links verwendet werden:

<Badge href="/changelog" variant="primary">Changelog ansehen</Badge>

Anpassung

Benutzerdefinierte Farben

Sie können benutzerdefinierte CSS-Klassen hinzufügen:

<Badge className="bg-purple-100 text-purple-800">Benutzerdefiniert</Badge>

Mit Icons

Kombinieren Sie Badges mit Icons für bessere visuelle Kommunikation:

<Badge variant="success">
  ✅ Verifiziert
</Badge>

Bewährte Praktiken

• Sparsam verwenden: Verwenden Sie Badges nur für wichtige Informationen
• Konsistente Farben: Halten Sie sich an Ihr Farbschema
• Kurzer Text: Halten Sie Badge-Texte kurz und prägnant
• Semantische Bedeutung: Verwenden Sie Varianten, die die Bedeutung vermitteln

Accessibility

• Badges sind vollständig zugänglich mit semantischen HTML-Elementen
• Verwenden Sie aussagekräftigen Text, der ohne visuelle Hinweise verständlich ist
• Farben allein sollten nicht die einzige Art sein, Informationen zu vermitteln