docs: Create AlertBadge guidelines.mdx (#1569)

* docs: Create AlertBadge guidelines.mdx

* Update AlertBadge guidelines.mdx

Author: Caro-Steinborn

apps/docs/src/content/03-components/status/alert-badge/guidelines.mdx

@@ -0,0 +1,38 @@
+# Grundlagen
+
+Ein AlertBadge ist eine erweiterte Form der [Badge](/03-components/status/badge), 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](/03-components/status/badge).
+- nach einem AlertBadge immer weitere Informationen durch einen [Alert](/03-components/status/alert) 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
+
+<DoAndDont>
+  <Plain heading="Verwende ein AlertBadge, wenn z. B. ...">
+    - der Hinweis kritisch, sicherheitsrelevant oder besonders wichtig ist.
+    - weitere Informationen durch einen Alert notwendig sind.
+
+  </Plain>
+
+  <Plain heading="Verwende ein Badge, wenn z. B. ...">
+    - Metadaten oder ergänzende Informationen dargestellt werden sollen.
+    - keine sofortige Aktion oder erhöhte Aufmerksamkeit notwendig ist.
+
+  </Plain>
+</DoAndDont>