Verwende ein AlertBadge, wenn z. B. ...
- der Hinweis kritisch, sicherheitsrelevant oder besonders wichtig ist.
- weitere Informationen durch einen Alert notwendig sind.
AlertBadge
Ein AlertBadge hebt Statusmeldungen hervor, die besondere Aufmerksamkeit erfordern.Grundlagen
Ein AlertBadge ist eine erweiterte Form der 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.
- nach einem AlertBadge immer weitere Informationen durch einen 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
Verwende ein Badge, wenn z. B. ...
- Metadaten oder ergänzende Informationen dargestellt werden sollen.
- keine sofortige Aktion oder erhöhte Aufmerksamkeit notwendig ist.
Playground
Verwende <AlertBadge />, um einen AlertBadge darzustellen.
Archiviert
import { AlertBadge } from "@mittwald/flow-react-components"; <AlertBadge>Archiviert</AlertBadge>
Status
Je nach Anwendungsfall stehen verschiedene Status-Farben zur Auswahl:
Archiviert
Update erfolgreich
Speicher fast voll
Speicher voll
Nicht gefunden
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.
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 |
key | Key | - | |
className | string | - | The elements class name. |