Back

Alert

Variants

With Title

Dismissible

With Action

Pass any templ component as Action to render a button in the trailing slot.

Usage

Import from the display package. Variant defaults to "info". Set Dismissible: true to add a close button (requires Alpine.js).

@display.Alert(display.AlertProps{
    Variant:     "success",      // "info" | "success" | "warning" | "danger"
    Title:       "Payment done", // optional bold heading
    Dismissible: true,           // adds Alpine-powered close button
    Action:      myActionBtn(),  // optional trailing templ component
}) {
    Your invoice has been paid.
}