A callout for something the reader needs to notice without leaving the page. One published component, four variants, and an action that stays hidden until...
One component, four variants
Alert - Variant × Content: Default · Destructive × Title + Description · Title only
Using the Alert
Alert or Sonner?
Alert stays on the page and belongs to the content it sits next to, so use it for a condition that persists - a failed payment, a missing setting. Sonner is a toast: it arrives, it is read, it leaves. If dismissing it should not lose the information, it is an Alert.
How do I add a button to it?
Do not add one. Every variant already carries a hidden Button layer - reveal it on your copy. That keeps your alert tracking the main component instead of becoming an override that stops receiving updates.
Why only two colours?
Because that is what shadcn/ui defines: default and destructive. Adding a warning or success alert means adding the colours to the theme set first, then duplicating the variant - the Components page in the docs walks through exactly that.
Does the icon change with the variant?
The destructive variant carries a warning mark and the default an info mark, both from the Tabler set already in the file. The mark belongs to the main, so a different icon means editing the main or detaching the copy.