Toast Notification

TL;DR

Toast Notifications sind kurze, unauffällige Statusmeldungen, die automatisch verschwinden. Sie informieren ohne zu stören.

Was ist eine Toast Notification?

Eine Toast Notification ist eine kleine Benachrichtigung, die kurz erscheint und automatisch verschwindet – wie ein Toast aus dem Toaster "poppt" sie auf. Typische Nachrichten: "Gespeichert", "Erfolgreich gesendet", "Fehler aufgetreten".

Wann Toasts verwenden

• Bestätigungen nach Aktionen
• Statusupdates
• Nicht-kritische Fehler
• Temporäre Hinweise

Wann keine Toasts

• Kritische Fehler (brauchen Bestätigung)
• Wichtige Entscheidungen
• Informationen, die gelesen werden müssen

Best Practices

• Kurzer, klarer Text
• Konsistente Position (meist oben rechts oder unten)
• 3-5 Sekunden sichtbar
• Manuell schließbar (X-Button)
• Farbe signalisiert Typ (grün = Erfolg, rot = Fehler)

Barrierefreiheit

• role="alert" oder aria-live="polite"
• Screenreader sollen sie vorlesen
• Genügend Zeit zum Lesen

Toasts und Nachhaltigkeit

Toasts sind minimal:

• Kein Seitenreload nötig
• Nur CSS und wenig JavaScript
• Halten Nutzer im Flow

Fazit

Toast Notifications sind das ideale Feedback-Pattern für kleine Bestätigungen. Sie informieren, ohne den Arbeitsfluss zu unterbrechen.