Toast-Generator
Toast-Benachrichtigungen für Erfolg, Fehler, Warnung und Info gestalten: Stil, Position, Farben und Animation – HTML und CSS.
Der Toast-Generator gestaltet kurze Benachrichtigungen für Erfolg, Fehler, Warnung und Info. Du wählst Stil (Akzentlinie, sanft getönt oder vollfarbig), Position am Bildschirmrand, Farben, Radius, Breite und Einblend-Animation. Der Code enthält passende ARIA-Rollen, damit Screenreader neue Meldungen ansagen.
<div class="toast-region" aria-live="polite">
<div class="toast toast--success" role="status">
<svg class="toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>
<div>
<p class="toast-title">Gespeichert</p>
<p class="toast-text">Deine Änderungen wurden übernommen.</p>
</div>
<button type="button" class="toast-close" aria-label="Schließen">×</button>
</div>
<div class="toast toast--info" role="status">
<svg class="toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
<div>
<p class="toast-title">Hinweis</p>
<p class="toast-text">Eine neue Version ist verfügbar.</p>
</div>
<button type="button" class="toast-close" aria-label="Schließen">×</button>
</div>
<div class="toast toast--warning" role="status">
<svg class="toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4M12 17h.01"/></svg>
<div>
<p class="toast-title">Achtung</p>
<p class="toast-text">Dein Speicher ist fast voll.</p>
</div>
<button type="button" class="toast-close" aria-label="Schließen">×</button>
</div>
<div class="toast toast--error" role="alert">
<svg class="toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
<div>
<p class="toast-title">Fehler</p>
<p class="toast-text">Die Datei konnte nicht hochgeladen werden.</p>
</div>
<button type="button" class="toast-close" aria-label="Schließen">×</button>
</div>
</div>Toasts richtig einsetzen
Ein Toast ist eine kurze, nicht blockierende Rückmeldung nach einer Aktion, etwa „Gespeichert“. Er erscheint am Bildschirmrand, stört den Arbeitsfluss nicht und verschwindet von selbst. Für Entscheidungen oder wichtige Fehler ist ein Dialog die bessere Wahl.
| Typ | Einsatz | Rolle |
|---|---|---|
| Erfolg | Aktion abgeschlossen | status |
| Info | Neutrale Neuigkeit | status |
| Warnung | Achtung, aber kein Fehler | status |
| Fehler | Aktion fehlgeschlagen | alert |
Die Farben prüfst du im Farbkontrast-Prüfer, vor allem beim vollfarbigen Stil mit weißer Schrift.
Häufige Fragen
Wie zeige ich einen Toast an?
Das CSS gestaltet die Meldungen, anzeigen musst du sie per JavaScript: Ein neues .toast-Element in die .toast-region einfügen und nach einigen Sekunden oder beim Klick auf Schließen wieder entfernen. Die Animation startet automatisch beim Einfügen.
Welche ARIA-Rolle braucht ein Toast?
Die Region hat aria-live="polite", damit neue Meldungen angesagt werden, ohne laufende Ausgaben zu unterbrechen. Fehler bekommen role="alert" und werden sofort vorgelesen, andere Meldungen role="status".
Wie lange sollte ein Toast sichtbar sein?
Als Faustregel etwa 4 bis 6 Sekunden, bei längerem Text mehr. Fehler sollten erst verschwinden, wenn sie geschlossen werden. Pausiere das Ausblenden, solange die Maus über dem Toast ist oder er den Fokus hat.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.