Appearance

View as Markdown

Toast ​

When to Use ​

  • Feedback after a mutation (create, update, delete) — success or error
  • Lightweight async signal that doesn't need to block the UI
  • Confirming work the user just initiated

Page Implementation ​

tsx
function InteractionToast() {
  const toast = useToast();
  return <Button onClick={() => toast.success("Order ORD-1024 approved")}>Approve</Button>;
}

Copy Rules ​

  • Success: name what happened, including the object identifier. "Order #1234 created", "Product archived".
  • Error: state what failed and why. "Failed to save: SKU already exists", "Couldn't archive product: network error".
  • Avoid generic messages like "Success" or "Something went wrong".

Constraints ​

  • Toast renders as a top-right overlay; mobile (<1024) anchors to bottom-center
  • Stack max one visible at a time; replace prior toast on new emission
  • Success auto-dismisses after 3s; Error is sticky (no auto-dismiss)

Anti-patterns ​

  • Toast on every navigation — creates noise; reserve for mutation feedback
  • More than one toast stacking — replace, don't accumulate
  • Blocking the UI on a toast — toasts are non-modal by definition