Alert

Alert calls out a persistent, inline status or message in the page flow — a form-level error, an info notice, a success summary. The tone sets the intent (info / success / warning / danger), with an optional leading icon, an AlertTitle headline, and an AlertDescription body. It stays in the layout where the user can re-read it; for a transient confirmation that auto-dismisses use a Sonner toast, and for a blocking decision use an AlertDialog.

Match the tone to the real severity. Reserve danger for genuine errors and warning for things that need attention before proceeding; crying wolf with red banners makes people tune them out. One alert per concern beats a stack of competing ones.

Say what happened and what to do. A useful alert names the problem and the next step ("Card declined — try another payment method"), not just "Error". Put a recovery action right in the alert when there's an obvious one.

Place it where the cause is, and announce it. Form-level errors belong at the top of the form or beside the field; the role=alert means it's announced when it appears, so don't render it pre-emptively. Pair color with an icon and text so the meaning survives without color.