Notification
E-Mail-Adresse archiviert
Die E-Mail-Adresse example@mittwald.de wurde archiviert.<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. |
Design Tokens
Größen & Stile
| Token | Wert |
|---|---|
--notification--padding | 8px |
--notification--corner-radius | 12px |
--notification--border-x-start-width | 12px |
--notification--border-style | solid |
--notification--border-width | 1px |
--notification--box-shadow | rgb(0 0 0 / 20%) 0 8px 16px |
--notification--width | 355px |
--notification--max-width | calc(100dvw - 2 * 32px) |
--notification--heading-to-text-spacing | 0.25rem |
--notification--spacing | 0.5rem |
--notification--font-size | 0.875rem |
Farben
| Token | Light | Dark |
|---|---|---|
--notification--border-color | #e3e8ef | #2c2f33 |
--notification--info-border-color | #5d6cb4 | #95a3e3 |
--notification--info-heading-color | #4a568d | #aebae9 |
--notification--info-background-color--default | #ffffff | #1d1e1f |
--notification--info-background-color--hover | #e0e7f4 | #2e3552 |
--notification--info-background-color--pressed | #d4dbf1 | #374066 |
--notification--warning-border-color | #d05e33 | #ff9b76 |
--notification--warning-heading-color | #a14c2c | #ffb79d |
--notification--warning-background-color--default | #ffffff | #1d1e1f |
--notification--warning-background-color--hover | #ffe2d8 | #5b3021 |
--notification--warning-background-color--pressed | #ffd4c4 | #723925 |
--notification--danger-border-color | #c43b57 | #f57c94 |
--notification--danger-heading-color | #983146 | #f8a2b3 |
--notification--danger-background-color--default | #ffffff | #1d1e1f |
--notification--danger-background-color--hover | #fcdae1 | #56232e |
--notification--danger-background-color--pressed | #fbc7d1 | #6c2836 |
--notification--success-border-color | #397f60 | #5ed3a0 |
--notification--success-heading-color | #2f6950 | #9fe5c6 |
--notification--success-background-color--default | #ffffff | #1d1e1f |
--notification--success-background-color--hover | #dff6ec | #1c3f30 |
--notification--success-background-color--pressed | #cff2e3 | #265440 |
--notification--unavailable-border-color | #595e64 | #adb3bc |
--notification--unavailable-heading-color | #404448 | #c1c7d0 |
--notification--unavailable-background-color--default | #ffffff | #1d1e1f |
--notification--unavailable-background-color--hover | #ebeff3 | #2c2f33 |
--notification--unavailable-background-color--pressed | #e3e8ef | #36393d |