AlertBadge

Ein AlertBadge hebt Statusmeldungen hervor, die besondere Aufmerksamkeit erfordern.

Archiviert

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

<AlertBadge>Archiviert</AlertBadge>

Best Practices

Halte die Beschriftung kurz und prägnant, idealerweise auf ein bis drei Wörter.
Wähle den Status passend zur Wichtigkeit der Meldung.
Setze ein AlertBadge nur für kritische oder besonders aufmerksamkeitsstarke Hinweise ein. Für weniger dringende Fälle genügt ein Badge.
Lass auf ein AlertBadge weiterführende Informationen in einem Alert folgen.
Orientiere dich am Informationskonzept. Es beschreibt das Zusammenspiel der Status-Komponenten.

Je nach Anwendungsfall stehen verschiedene Status-Farben zur Auswahl:

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.

Archiviert

Update erfolgreich

Speicher fast voll

Speicher voll

Nicht gefunden

Property	Type	Default	Description
`children`	`ReactNode`	-
`status`	`"info" \| "success" \| "warning" \| "danger" \| "unavailable"`	-	The elements status
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.
`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.