toast

# Toast Notifications ## Context - When displaying temporary notifications to users - For success, error, or informational messages - For async operation feedback - DO NOT overuse toasts, follow the standard UX patterns ## Requirements - Import toast from 'sonner' package - Use toast.promise() for async operations with loading/success/error states - Use direct toast methods for immediate notifications - Keep messages concise and informative ## Examples <example> // For async operations const promise = someAsyncOperation(); toast.promise(promise, { loading: 'Operation in progress...', success: 'Operation successful!', error: 'Operation failed.', }); </example> <example> // For immediate notifications toast.success('Action completed successfully!'); toast.error('An error occurred.'); toast.info('Here's some information.'); </example> <example type="invalid"> // Don't create custom toast implementations const showToast = (message) => { const toastElement = document.createElement('div'); toastElement.innerText = message; document.body.appendChild(toastElement); setTimeout(() => toastElement.remove(), 3000); }; </example> <example type="invalid"> // Don't use alert() for notifications alert('Operation successful!'); </example>