sonner-js Playground

Alle Möglichkeiten der Vanilla-Version — kein Build, kein React.

Tipp: Maus über einen Toast hält den Timer an & fächert den Stack auf. Alt + T klappt manuell auf/zu. Ziehen (Swipe) schließt.

Grundtypen

Mit Beschreibung

// Achtung: die Kurzform success()/error() reicht KEINE description durch.
// Für Titel + Beschreibung immer über show() gehen:
Sonner.show("Deploy erfolgreich", {
  type: "success",
  description: "Container läuft auf pve-01."
});

Optionen live umschalten

richColors greift sofort für alle Toasts. closeButton gilt für neu gezeigte Toasts.

Position

Stapeln & steuern

// "Alle schließen" gibt es nicht eingebaut — einfach über die Liste iterieren:
function dismissAll() {
  const ol = document.getElementById("sonner-toaster-list");
  if (!ol) return;
  [...ol.children].forEach(el => Sonner.remove(el.getAttribute("data-id")));
}

Praxis-Beispiele

Loading & In-Place-Update

Aus sonner-ext.js: ein Loading-Toast mit dem originalen Spinner, der stehen bleibt und sich in-place in Success/Error verwandelt — ohne Wegsliden.

Promise-Flow (automatisch)

Ein Aufruf: Loading → automatisch Success/Error, sobald die Aufgabe fertig ist. Genau dein Deploy-Case.

Sonner.promise(deployContainer(), {
  loading: "Deploye Container…",
  success: (data) => `Container #${data.id} läuft`,   // Fn oder String
  error:   "Deploy fehlgeschlagen"
});