Push Notifications

Toast notifications using Sonner. Display feedback messages, alerts, and confirmations with various styles and positions.

Basic Notifications

Default Toast

Simple notification message

Success

Success message with checkmark

Error

Error message with X icon

Warning

Warning message with alert icon

Info

Informational message

Loading

Loading state that updates to success

Enhanced Notifications

With Description

Toast with additional context

With Action Button

Toast with interactive action

Promise Toast

Automatically handles async operations

Custom Duration

Toast that stays for 10 seconds

Position Variants

Toast Positions

Click buttons to see toasts in different positions

Implementation

Setup
Add Toaster to your root layout
// app/layout.tsx
import { Toaster } from "@/components/ui/sonner";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}
Usage
Import and use toast function
import { toast } from "sonner";

// Basic
toast("Message");

// With options
toast.success("Success!", {
  description: "Your changes were saved",
  action: {
    label: "View",
    onClick: () => console.log("View")
  }
});
Features
  • Multiple notification types (success, error, warning, info)
  • Customizable positions (6 positions available)
  • Action buttons for interactive notifications
  • Loading states with promise handling
  • Dark mode support built-in
  • Fully accessible with keyboard navigation