Alert
Benachrichtigungen für verschiedene Kontexte: Information, Erfolg, Warnung und Fehler. Setzt automatisch die korrekten ARIA-Rollen (role="alert" bei Fehler/Warnung, role="status" bei Info/Erfolg).
Varianten
Vier Varianten für unterschiedliche Kontexte. Jede bringt ein passendes Icon mit.
Alle Varianten
Dies ist ein informativer Hinweis.
Die Aktion wurde erfolgreich ausgeführt.
Bitte beachten Sie diese Warnung.
Ein Fehler ist aufgetreten.
<Alert variant="info">Dies ist ein informativer Hinweis.</Alert>
<Alert variant="success">Die Aktion wurde erfolgreich ausgeführt.</Alert>
<Alert variant="warning">Bitte beachten Sie diese Warnung.</Alert>
<Alert variant="error">Ein Fehler ist aufgetreten.</Alert>Mit Titel
Ein optionaler Titel macht die Meldung prominenter und scannbarer.
Alerts mit Titel
Hinweis
Weitere Informationen finden Sie in der Dokumentation.
Gespeichert
Ihre Änderungen wurden erfolgreich übernommen.
Fehler
Die Datei konnte nicht hochgeladen werden. Bitte versuchen Sie es erneut.
<Alert variant="info" title="Hinweis">Weitere Informationen finden Sie in der Dokumentation.</Alert>
<Alert variant="success" title="Gespeichert">Ihre Änderungen wurden erfolgreich übernommen.</Alert>
<Alert variant="error" title="Fehler">Die Datei konnte nicht hochgeladen werden. Bitte versuchen Sie es erneut.</Alert>Schliessbar
Mit dismissible erscheint ein Schliessen-Button. Der Alert wird beim Klick aus dem DOM entfernt.
Dismissible Alerts
Diese Meldung kann geschlossen werden.
Achtung
Auch mit Titel funktioniert der Dismiss-Button.
<Alert variant="info" dismissible>Diese Meldung kann geschlossen werden.</Alert>
<Alert variant="warning" title="Achtung" dismissible>Auch mit Titel funktioniert der Dismiss-Button.</Alert>Redakteur-Hinweise
Alerts sind kurze, kontextbezogene Hinweise. Die richtige Variante und ein klarer Text helfen Nutzern, die Nachricht sofort einzuordnen.
| Element | Empfehlung | Beispiel |
|---|---|---|
| Variante | info = neutrale Hinweise, success = Bestätigungen, warning = Vorsicht (nicht kritisch), error = Fehler/kritisch | ✕ warning für Erfolgsmeldungen ✓ success für Erfolgsmeldungen |
| Titel | Optional. 2–5 Wörter, scannbar. Nur setzen wenn der Kontext sonst unklar ist. | ✓ „Wartungsarbeiten am 15.04." ✕ „Wichtige Information" |
| Text | 1–2 Sätze, max. 150 Zeichen. Konkret sagen was zu tun ist oder was passiert ist. | ✓ „Ihre Änderungen wurden gespeichert." ✕ „Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut." |
| Schliessbar | dismissible nur bei temporären Hinweisen. Persistente Warnungen (z.B. Cookie-Hinweis) nicht schliessbar machen. | |
| Platzierung | Direkt über oder im betroffenen Bereich platzieren. Nicht am Seitenende verstecken. |
Installation
cp-components add alert