Alert
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 you need it.
variant="default" · content="title+description" · action hidden
An action that does not cost a variant
Every Alert carries a Button layer that ships hidden. Reveal it on a copy when the alert needs an action, and the matrix stays at four instead of doubling to eight. The checkbox above is that layer.
That is the rule the kit follows everywhere: if presence changes the layout it becomes a real axis, and if it does not, a hidden layer is enough. An action sitting at the end of the row does not move anything beside it, so a hidden layer is enough here.
One component, four variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Alert
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.
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.
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.
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.