---
url: https://docs.tailor.tech/app-shell/patterns/interaction-toast.md
description: Lightweight feedback after mutations — success or error notifications
---

# 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