# AlertBadge

Ein AlertBadge hebt Statusmeldungen hervor, die besondere Aufmerksamkeit erfordern.

## Overview

# Playground

Verwende `<AlertBadge />`, um einen AlertBadge darzustellen.

```tsx
import { AlertBadge } from "@mittwald/flow-react-components";

<AlertBadge>Archiviert</AlertBadge>
```

---

# Status

Je nach Anwendungsfall stehen verschiedene Status-Farben zur Auswahl:

```tsx
import { AlertBadge } from "@mittwald/flow-react-components";

<>
  <AlertBadge status="info">Archiviert</AlertBadge>
  <AlertBadge status="success">
    Update erfolgreich
  </AlertBadge>
  <AlertBadge status="warning">
    Speicher fast voll
  </AlertBadge>
  <AlertBadge status="danger">Speicher voll</AlertBadge>
  <AlertBadge status="unavailable">
    Nicht gefunden
  </AlertBadge>
</>
```

**Info:** Allgemeine Systemzustände oder laufende Prozesse, die keine Aktion
erfordern.

**Success:** Abgeschlossene, erfolgreiche oder positiv bewertete Zustände.

**Warning:** Hinweise auf mögliche Risiken mit einer klaren Handlungsempfehlung.

**Danger:** Akute Fehlerzustände oder kritische Probleme, die sofortige
Aufmerksamkeit erfordern.

**Unavailable:** Zustände aufgrund von nicht verfügbaren oder gelöschten
Inhalten.