Components

Alert

Static banner that surfaces a piece of context above content. Five tones (default / info / warning / success / muted). Never for transient feedback — use Toast for that.

Updated Jul 10, 2026 by Leonardo Posada

Variants

Heads up

The rule you're editing is currently live.

Careful

Deleting this route will affect 24 payments in progress.

Ready

All changes have been saved to production.

Note

This account still shows Test mode traffic.

<Alert variant="info">
  <Info weight="fill" className="size-4" />
  <AlertTitle>Heads up</AlertTitle>
  <AlertDescription>The rule you're editing is currently live.</AlertDescription>
</Alert>

When to use

Explaining a persistent state above a form or table.
Highlighting a limitation or a change the user should be aware of before acting.

When not to use

Transient confirmations — use Toast.
Blocking modals — use Dialog.

Usage

Include an icon that matches the tone (Info / Warning / CheckCircle).
Keep the title one line and the description under two sentences.

Don't

Don't stack more than one Alert per surface.
Don't use tone='warning' (destructive) as decoration.