Built-in Alert Banner component (<StxAlert>)

[glennmichael123]

Summary

Static page-level alert banners for informational messages, warnings, and errors. Different from stxAlert() (which is an imperative dialog) — this is a declarative inline banner.

Usage

<StxAlert type="info" title="Note">
  This feature is in beta. <a href="/docs/beta">Learn more</a>
</StxAlert>

<StxAlert type="warning" closable>
  Your trial expires in 3 days.
</StxAlert>

<StxAlert type="error" icon="alert-circle">
  Failed to connect to the database.
</StxAlert>

<StxAlert type="success" title="Deployed!" closable>
  Your changes are now live.
</StxAlert>

Props

• type: info | warning | error | success (default: info)
• title — bold heading text
• icon — custom icon name (default: type-appropriate icon)
• closable — show dismiss button
• variant — filled | outline | subtle (default: subtle)

Features

• Slot content supports HTML (links, bold, etc.)
• Type-specific left border + icon color
• Dismiss with fade-out animation
• Dark mode support

[glennmichael123]

Delivered via @stacksjs/components, which ships with every stx app and is auto-registered (no import needed in .stx files). See CLAUDE.md § "Reach for stx primitives before vanilla JS" for the full inventory; the relevant components for this request are documented there.

Closing as effectively delivered. If a specific behavior or API affordance from the original request is missing from the shipped components, please open a focused ticket against @stacksjs/components describing the exact gap — that's easier to track than a broad "make it a builtin" ask.