Sonner

Use short-lived toasts to confirm an action or report a recoverable result.

The example uses the shared themed toaster and fires an accessible success notification from a real button.

Show success toast

Show codeCopy

Import

import { Toaster } from "@workshop1/ui/components/sonner"
import { toast } from "sonner"

Composition

Mount one Toaster near the application root, then call toast, toast.success, or the matching terminal state from the completed action. Use the description for useful context, not a second title.

Accessibility

Do not make a toast the only record of an error or required next step. Keep persistent validation beside the field or action that needs attention. Avoid firing several notifications for one operation.

Best practices

• Confirm completed work in plain language.
• Reserve success, warning, and error tones for their actual states.
• Use a loading toast only when it will resolve or dismiss reliably.