Playground
Verwende <Alert />, um einen Alert darzustellen.
import { Alert, Heading, } from "@mittwald/flow-react-components"; <Alert> <Heading>E-Mail-Adresse wurde archiviert</Heading> </Alert>
Mit Inhalt
Der Text eines Alerts sollte klar, prägnant und handlungsorientiert formuliert sein. Er erklärt dem User, was passiert ist, warum es relevant ist und was als Nächstes zu tun ist. Wenn möglich, biete dem User eine Möglichkeit, sein Problem zu lösen – verwende dazu einen Link oder Button. Eingefügte Buttons werden automatisch in der Größe Small dargestellt, um ein ausgewogenes Verhältnis im Gesamtbild zu gewährleisten.
Status
Je nach Anwendungsfall stehen vier Status-Farben zur Auswahl: Info, Warning, Danger und Success.
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.