AlertText
AlertText informiert den User über das Ergebnis einer ihrer Aktionen. Im Gegensatz zu Alert kann eine AlertText sehr nah an der Stelle platziert werden, an der die Aktion stattgefunden hatGrundlagen
Best Practices
Achte bei der Verwendung eines AlertTexts darauf, dass ...
- der Schweregrad sinnvoll gewählt ist –
dangerfür sofortigen Handlungsbedarf,warningfür Handlungsbedarf,infofür eine wichtige Information,successfür einen Erfolg undunavailablefür nicht verfügbar. - der Text klar, prägnant und lösungsorientiert formuliert ist. Vermeide technische Fachbegriffe oder Schuldzuweisungen. Beachte die Content-Guidelines für Fehlermeldungen.
Verwendung
Verwende einen AlertText, um zusätzliche wichtige Informationen oder Hinweise in einem bestimmten Kontext bereitzustellen.
Playground
Verwende <AlertText />, um einen Alert darzustellen.
Info
import { AlertText } from "@mittwald/flow-react-components"; <AlertText>Info</AlertText>
Status
Je nach Anwendungsfall stehen verschiedene Status-Farben zur Auswahl:
InfoWarningDangerSuccessUnavailable
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.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
className | string | - | The elements class name. |
children | ReactNode | - | |
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 | - | |
status | "info" | "success" | "warning" | "danger" | "unavailable" | - | The elements status |