Using a Toast for critical errors that require action
Toasts auto-dismiss. If the user must take action — or risks losing work — a toast hides the error before they can read it.
The wrong way
Surfacing a payment failure as a transient toast that disappears after four seconds.
// Payment processing fails
toast.error('Payment failed. Try again.');
// User looks away, toast vanishes, error is now invisibleWhy
Toasts are excellent for fire-and-forget feedback — "Saved", "Copied", "Sent". They're terrible for anything that needs the user's attention or recovery. If the user looked away when the toast appeared, the failure is silent, which is exactly what principle 12 (Provide useful feedback) is meant to prevent. Toasts are a *secondary* signal, never the only one for action-required errors.
The right way
Use an Alert (inline, persistent) for errors tied to a region, or a Dialog when the error blocks further work. Both stay visible until the user dismisses or resolves them.
<Alert
variant="error"
title="Payment failed"
description="The card was declined by your bank."
action={{ label: 'Try a different card', onClick: retry }}
/>