Examples

This page contains real-world, copy-paste-ready patterns for common UI flows. These examples focus on clarity, user feedback, and predictable behavior.

Async upload (promise)

For uploads, saves, or background jobs, use toast.promise. It automatically handles loading, success, and error states without extra boilerplate.

Delete with undo

This pattern avoids blocking modals. Perform the delete immediately, then give the user a short window to undo the action.

Confirm before delete

Use toast.confirm when an action is destructive and cannot be easily undone. Keep the copy specific and explicit.

Loading → update

When you need more control than toast.promise, use toast.loading and later update the same toast.

Dismiss and replace

When showing a critical message, it’s often better to clear older toasts first so the user focuses on the latest state.

Custom layout

Use toast.custom when you need full control over layout, multiple actions, or custom styling. Keep it compact and focused.

UX guidelines

• Prefer toast.promise for async work to keep UI state consistent.
• Keep messages concise; move details into description.
• Avoid stacking multiple errors; dismiss older toasts when showing critical ones.
• Use custom toasts sparingly for complex interactions.

That’s it

You now have all the building blocks to integrate NextToast cleanly and consistently across your application.