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


## Develop

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | - |
| `status` | `"info" \| "success" \| "warning" \| "danger" \| "unavailable"` | - | The elements status |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | - |
| `ref` | `Ref<HTMLSpanElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see [React Docs](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) |
| `key` | `Key` | - | - |
| `className` | `string` | - | The elements class name. |


## Guidelines

# Grundlagen

Ein AlertBadge ist eine erweiterte Form der
[Badge](/04-components/status/badge/overview), die für kritische Hinweise und
dringende Informationen eingesetzt wird. Es unterscheidet sich durch den Einsatz
eines Icons und eine auffällige Farbgebung.

## Best practices

Achte bei der Verwendung einer AlertBadge darauf, dass ...

- die Beschriftung kurz und prägnant ist (idealerweise in 1–3 Wörtern).
- der richtige Status verwendet wird (Info, Success, Warning, Danger).
- es nur eingesetzt wird, wenn der Hinweis kritisch oder besonders
  aufmerksamkeitsstark ist – andernfalls genügt ein
  [Badge](/04-components/status/badge/overview).
- nach einem AlertBadge immer weitere Informationen durch einen
  [Alert](/04-components/status/alert/overview) folgen.

## Verwendung

Verwende ein AlertBadge, um ...

- relevante Hinweise darzustellen – Info (z. B. Kündigung vorgemerkt, Update
  verfügbar).
- dringende Benutzeraktionen hervorzuheben – Warning (z. B. Zahlung
  erforderlich, Domain unverifiziert).
- kritische Systemzustände zu markieren – Danger (z. B. Zugriff verweigert).

## AlertBadge vs. Badge

  

- der Hinweis kritisch, sicherheitsrelevant oder besonders wichtig ist.
    - weitere Informationen durch einen Alert notwendig sind.

  

- Metadaten oder ergänzende Informationen dargestellt werden sollen.
    - keine sofortige Aktion oder erhöhte Aufmerksamkeit notwendig ist.