AlertText
AlertText informiert über das Ergebnis einer Aktion, nah an der auslösenden Stelle.Info
import { AlertText } from "@mittwald/flow-react-components"; <AlertText>Info</AlertText>
Best Practices
- Wähle den Schweregrad passend zur Bedeutung der Meldung. Welcher Status wofür steht, beschreibt das Informationskonzept.
- Formuliere den Text klar, prägnant und lösungsorientiert. Verzichte auf Fachbegriffe und Schuldzuweisungen und beachte die Content Guidelines für Fehlermeldungen.
Status
Je nach Anwendungsfall stehen verschiedene Status-Farben zur Auswahl:
- Info – Allgemeine Systemzustände oder laufende Prozesse, die keine Aktion erfordern.
- Warning – Hinweise auf mögliche Risiken mit einer klaren Handlungsempfehlung.
- Danger – Akute Fehlerzustände oder kritische Probleme, die sofortige Aufmerksamkeit erfordern.
- Success – Abgeschlossene, erfolgreiche oder positiv bewertete Zustände.
- Unavailable – Zustände aufgrund von nicht verfügbaren oder gelöschten Inhalten.
InfoWarningDangerSuccessUnavailable
Properties
| Property | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | |
className | string | - | The elements class name. |
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. |