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 | 8px |
--notification--border-x-start-width | 4px |
--notification--border-style | solid |
--notification--border-width | 1px |
--notification--box-shadow | rgb(0 0 0 / 12.5%) 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 | #E5EFF8 | #3A434E |
--notification--info-border-color | #0054F5 | #85AFFF |
--notification--info-heading-color | #003FB8 | #ABC6FF |
--notification--info-background-color--default | #FFFFFF | #1B1F24 |
--notification--info-background-color--hover | #F0F5FF | #00205C |
--notification--info-background-color--pressed | #E0EBFF | #002A7B |
--notification--warning-border-color | #F56800 | #FFC89F |
--notification--warning-heading-color | #C25200 | #FFD9BD |
--notification--warning-background-color--default | #FFFFFF | #1B1F24 |
--notification--warning-background-color--hover | #FFF4EB | #763200 |
--notification--warning-background-color--pressed | #FFEBDC | #8F3D00 |
--notification--danger-border-color | #E1244C | #F2A2B3 |
--notification--danger-heading-color | #AB1737 | #F7C1CC |
--notification--danger-background-color--default | #FFFFFF | #1B1F24 |
--notification--danger-background-color--hover | #FDF0F3 | #540B1B |
--notification--danger-background-color--pressed | #FBE0E6 | #710F24 |
--notification--success-border-color | #00825B | #4FFFC9 |
--notification--success-heading-color | #005F42 | #87FFDA |
--notification--success-background-color--default | #FFFFFF | #1B1F24 |
--notification--success-background-color--hover | #DCFFF4 | #00291C |
--notification--success-background-color--pressed | #C0FFEB | #003B29 |
--notification--unavailable-border-color | #3A434E | #E5EFF8 |
--notification--unavailable-heading-color | #3A434E | #E5EFF8 |
--notification--unavailable-background-color--default | #FFFFFF | #1B1F24 |
--notification--unavailable-background-color--hover | #E5EFF8 | #3A434E |
--notification--unavailable-background-color--pressed | #DCE9F7 | #5E6C7A |