CP Registry

Toast

Transiente System-Benachrichtigungen für Aktions-Feedback. Erscheinen kurz, verschwinden automatisch und stellen sich ordentlich in die Warteschlange. Der Manager in toast.ts steuert maximal 3 gleichzeitige Meldungen per FIFO.

Tone-Varianten

Vier semantische Abstufungen — von neutraler Info bis kritischem Fehler. Jede Variante setzt automatisch die korrekte ARIA-Live-Region.

Alle Tones

success und info nutzen aria-live='polite', warning und error aria-live='assertive'.

Förderantrag gespeichert

Ihr Antrag wurde erfolgreich übermittelt.

Neue Ladesäulen verfügbar

3 neue Stationen in Ihrer Nähe freigeschaltet. 
<Toast tone="success" title="Förderantrag gespeichert">
  Ihr Antrag wurde erfolgreich übermittelt.
</Toast>

<Toast tone="info" title="Neue Ladesäulen verfügbar">
  3 neue Stationen in Ihrer Nähe freigeschaltet.
</Toast>

<Toast tone="warning" title="Akku schwach">
  Akkustand unter 10% — nächste Ladesäule in 800 m.
</Toast>

<Toast tone="error" title="Verbindung verloren">
  Bitte Netzwerkverbindung prüfen und erneut versuchen.
</Toast>

Persistent mit Aktion

Mit duration=0 bleibt der Toast stehen bis der Nutzer aktiv reagiert. Ideal für Rückgängig-Aktionen.

Persistent + Action-Slot

Förderantrag-Rückgängig-Muster – hält an bis der Nutzer entscheidet.

Antrag entfernt

<Toast
  tone="info"
  title="Antrag entfernt"
  :duration="0"
  dismissible
>
  <button slot="action" class="text-sm font-medium text-brand-primary underline cursor-pointer">
    Rückgängig machen
  </button>
</Toast>

Programmatische API

Im echten Einsatz wird pushToast() aus dem Manager-Skript aufgerufen. Die Buttons unten demonstrieren das Stacking-Verhalten.

toast.ts Manager

Import und Aufruf — kein manuelles DOM-Handling nötig.

import { pushToast } from '../components/Toast/toast';

// Förderantrag gespeichert
pushToast({
  tone: 'success',
  title: 'Förderantrag gespeichert',
  message: 'Antragsnummer: KFW-2024-00847',
  duration: 6000,
});

// Verbindungsfehler
pushToast({
  tone: 'error',
  title: 'Verbindung verloren',
  message: 'Erneuter Versuch in 30 Sekunden.',
  duration: 0,
  dismissible: true,
});

Redakteurshinweise

Wann einsetzen

  • Bestätigung nach Nutzeraktion (Speichern, Löschen, Versenden)
  • Kurze Statusmeldungen (Verbindung, Akkustand)
  • Niemals für dauerhafte Fehler — dafür Alert verwenden
  • Maximal 3 gleichzeitig im System

Inhalts-Empfehlungen

  • Titel: max. 6 Wörter, konkret und handlungsorientiert
  • Nachricht: max. 20 Wörter — was ist passiert?
  • Keine Fragen stellen — Toasts sind Aussagen, keine Dialoge
  • Action-Text: Verb + kurzes Objekt ("Rückgängig", "Anzeigen")

Mobile + A11y

  • Max-Breite 22rem — auf mobilen Geräten voll ausgerichtet
  • Dismiss-Button hat aria-label, screen reader erkennt ihn
  • warning/error unterbrechen Screenreader sofort (assertive)
  • Animationen bei prefers-reduced-motion deaktiviert

Haeufige Fehler

  • Fehler: Toast für persistente Fehlermeldungen (→ Alert)
  • Fehler: Mehr als 3 Toasts auf einmal auslösen
  • Fehler: Wichtige Entscheidungen im Toast verstecken (→ Dialog)
  • Fehler: Zu lange Nachrichtentexte (kuerzen!)

Installation

cp-components add toast