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 | Description |
|---|---|---|
className | string | The elements class name. |
children | ReactNode | |
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 | |
status | info | success | warning | danger | unavailable | The elements status |