| description | Toast notifications with Sonner for user feedback. Use for success/error messages, async operation feedback, and temporary notifications. Always use when using Sonner. |
| name | toast |
| metadata | {"skiller":{"source":".agents/rules/toast.mdc"}} |
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
// For async operations
const promise = someAsyncOperation();
toast.promise(promise, {
loading: 'Operation in progress...',
success: 'Operation successful!',
error: 'Operation failed.',
});
// For immediate notifications
toast.success('Action completed successfully!');
toast.error('An error occurred.');
toast.info('Here's some information.');
// 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);
};
// Don't use alert() for notifications
alert('Operation successful!');
