Variants

Success (5s), info (6s) and warning (8s) auto-dismiss, with a countdown bar. Errors persist until the user dismisses them, navigates away, or focuses the field the error names.

With Description

Every variant accepts sonner’s ExternalToast options as a second argument — description is the most common.

Action & Cancel Buttons

The action and cancel options render buttons inside the toast itself — useful for undo flows or quick confirmations.

Loading → Resolved

toastService.loading returns an id with no fixed duration; pass that id to success/error so the same toast morphs into the result instead of stacking a new one.

Duration & Manual Dismiss

Error Tied to a Field

Pass field (an element, id or name) and the error toast dismisses itself the moment that field is focused.

 

Locale-Aware Helpers

showSuccessToast / showInfoToast / showErrorToast wrap toastService with locale detection (reads document.dir) and, for errors, a lookup against the shared ErrorCode table — the same path a real API error handler uses.