Alert

Alert reports the state of a page, form or card and stays on screen until someone deals with it, as with scheduled maintenance or a failed sync. Place it inline, as a banner across the top of the page, or as a band across a card.

Install

bashnpx shadcn@4.18.0 add @siteplane/alert

Import it from @/siteplane/components/alert. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Toast: Pick Toast instead for a brief confirmation after an action that should disappear on its own.
• vs Alert Dialog: Pick Alert Dialog instead when people must make a decision before continuing.
• vs Empty State: Pick Empty State instead when a collection has no content and needs a next step.

Rules

• Pick variant for the tone and state the status in the text, so color is not the only signal.
• Rely on the role the variant sets: error and warning interrupt as alerts, the others announce politely.
• Make the icon the first child of Alert, ahead of the title, so it gets its own column.
• Use layout="banner" for page-wide issues and layout="band" directly under a CardHeader for one card's problem.
• Put buttons in AlertAction and connect their handlers in your app; use AlertClose for a dismiss control.

Reference

• Alert docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Feedback. Read the installed source under src/siteplane before relying on an API.