Notification
E-Mail-Adresse archiviert
Die E-Mail-Adresse example@mittwald.de wurde archiviert.import { Heading, Notification, Text, } from "@mittwald/flow-react-components"; <Notification> <Heading>E-Mail-Adresse archiviert</Heading> <Text> Die E-Mail-Adresse <strong>example@mittwald.de</strong>{" "} wurde archiviert. </Text> </Notification>
Best Practices
- Kommuniziere nur relevante und wichtige Informationen. Das vermeidet eine Informationsüberlastung.
- Formuliere die Meldung kurz, klar und verständlich, als Faustregel in höchstens zwölf Wörtern.
- Halte Notifications gesammelt und später abrufbar.
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.
E-Mail-Adresse archiviert
Die E-Mail-Adresse example@mittwald.de wurde archiviert.Speicher fast voll
Der Speicherplatz im Projekt My Project ist zu 80% voll.Kein SSL-Zertifikat
Für example.de konnte kein SSL-Zertifikat ausgestellt werden.App installiert
Deine App My WordPress wurde erfolgreich installiert.Nicht gefunden
Die gewünschten Inhalte sind leider nicht verfügbar.Properties
| Property | Type | Description |
|---|---|---|
autoClose | boolean | Whether the notification should disappear automatically after some time. |
href | string | A link that is triggered when clicking the notification. |
status | info | success | warning | danger | unavailable | The elements status |
Events
| Property | Type | Description |
|---|---|---|
onClick | (() => void) | Handler that is called when the notification is clicked. |
onClose | (() => void) | Handler that is called when the close button of the notification is clicked. |
Accessibility
| Property | Type | Description |
|---|---|---|
aria-describedby | string | Identifies the element (or elements) that describes the object. @see aria-labelledby |
aria-hidden | Booleanish | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
aria-label | string | Defines a string value that labels the current element. @see aria-labelledby. |
aria-labelledby | string | Identifies the element (or elements) that labels the current element. @see aria-describedby. |