Toast

A notification system for brief, non-blocking feedback. Use the useToast hook to trigger toasts and render the Toaster component to display them.

Variants

Click the buttons below to trigger toasts of each variant.

Async Actions

Show a loading toast that transitions to success or error after an async operation.

Custom Duration

Control how long each toast stays visible.

Real-World Actions

Common application actions with contextual toast feedback.

useToast API

The useToast() hook returns an object with the following methods:

• toast.info({ title, description, duration }) — Show an info toast
• toast.success({ title, description, duration }) — Show a success toast
• toast.warning({ title, description, duration }) — Show a warning toast
• toast.error({ title, description, duration }) — Show an error toast
• dismiss(id) — Dismiss a toast by its ID

Toaster Props