Toast Notifications

Provide immediate feedback after user actions. Click the buttons below to see different toast types.

UX Issue in drmg-sales

"After saving a contact edit, no confirmation toast/message is shown"

Fix: Add toast notifications after all CRUD operations (create, update, delete).

Try It Out

When to Use

After creating a record (contact, deal, task)
After updating a record
After deleting a record
After completing an action (send email, log call)
When an async operation completes

Best Practices

Auto-dismiss success toasts after 5 seconds
Keep error toasts visible until dismissed
Include action links for errors (retry, details)
Position in bottom-right corner
Stack multiple toasts vertically

Integration with Server Actions

// In your server action handler:
const result = await updateContact(formData);

if (result.success) {
  toast.success('Contact saved', `${result.data.name} updated successfully`);
} else {
  toast.error('Failed to save', result.error.message);
}

// Use a toast library like sonner, react-hot-toast, or shadcn/ui toast

// In your server action handler: const result = await updateContact(formData); if (result.success) { toast.success('Contact saved', `${result.data.name} updated successfully`); } else { toast.error('Failed to save', result.error.message); } // Use a toast library like sonner, react-hot-toast, or shadcn/ui toast