Toast

Toast notifications using Sonner with pill shape and custom styling

Debug - Persistent Toasts

Persistent
auto
duration: Infinity

Toast Types

Default
auto
toast()
Success
auto
toast.success()
Error
auto
toast.error()
Warning
auto
toast.warning()
Info
auto
toast.info()
Loading
auto
toast.loading()

Toast with Action Button

Success + Action
auto
action: { label, onClick }
Info + Action
auto
action: { label, onClick }
Error + Action
auto
action: { label, onClick }

Toast Options

Duration
auto
duration: 5000
Close Button
auto
closeButton: true
Description
auto
description: string

All Toast Types

Show all toast types at once

Props:
{ type: "all" }

Promise Toast

Toast that tracks promise state

Props:
{ toast.promise: "Promise" }

Positioned Toast

Toast appears at top-center (configured in Toaster)

Props:
{ position: "top-center" }

Long Content

Toast with longer text content

Props:
{ content: "long string" }

Dismiss All

Dismiss all active toasts

Props:
{ toast.dismiss(): "void" }

Action Button Styles

Action button uses primary styling from Toaster config

Props:
{ actionButton: "styled" }

Toaster Configuration

The Toaster is configured in src/components/ui/sonner.tsx

// Toaster configuration
<Toaster
  position="top-center"
  richColors
  expand={false}
  toastOptions={{
    classNames: {
      toast: 'group toast group-[.toaster]:bg-white group-[.toaster]:rounded-full group-[.toaster]:shadow-lg',
      actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground group-[.toast]:rounded-xl',
    },
  }}
/>