Toasts

sonner mit Atlas-Default-Setup (top-right, richColors, closeButton). Klick auf die Buttons unten testet die Variants.

Live Demo

Atlas-Setup

In app/layout.tsx:

app/layout.tsxtsx

<Toaster
  position="top-right"
  richColors
  closeButton
  toastOptions={{
    className: 'rounded-md border shadow-lg',
  }}
/>

Verwendungtsx

import { toast } from 'sonner'

// Erfolgs-Toast
toast.success('Fahrzeug gespeichert')

// Error mit Description
toast.error('Speichern fehlgeschlagen', {
  description: 'Die Frame-Nummer ist nicht eindeutig.',
})

// Promise-Toast (loading → success/error automatisch)
toast.promise(saveVehicle(data), {
  loading: 'Speichern läuft …',
  success: (res) => `Fahrzeug ${res.id} angelegt`,
  error: 'Fehler beim Speichern',
})