Goshtoso

Alert

Inline messages in four semantic colors (info, success, warning, danger). Supports dismiss, action links, action buttons, and list content.

Usage Example 
@alert.Alert(alert.Config{
    Title:       "Update Available",
    Description: "A new version is available.",
    Variant:     alert.Info,
})

Dismissible

Dismissible: true adds a close button that fades the alert out via an Alpine transition.

Dismissible 
@alert.Alert(alert.Config{
    Title:       "Successfully Subscribed",
    Description: "Welcome aboard!",
    Variant:     alert.Success,
    Dismissible: true,
})

With Link

Attach a Link config to render a trailing action link.

With Link

With List

Pass ListItems to render a bulleted list under the description.

With List 
@alert.Alert(alert.Config{
    Title:       "Password Requirements",
    Description: "Make sure your password:",
    Variant:     alert.Info,
    ListItems: []string{
        "has minimum 8 characters",
        "includes both upper and lower cases",
        "contains at least one number",
    },
})

With Action Buttons

Attach an Action config for primary + dismiss buttons.

With Action Buttons 
@alert.Alert(alert.Config{
    Title:       "Update Available",
    Description: "A new version is available.",
    Variant:     alert.Info,
    Action: &alert.ActionConfig{
        PrimaryLabel:    "Update Now",
        PrimaryOnClick: "alert('Updating...')",
        DismissLabel:   "Dismiss",
    },
})

API Reference

PropTypeDefaultDescription
Titlestring""Alert heading.
Descriptionstring""Alert body text.
VariantVariantInfoColor: "info", "success", "warning", "danger".
DismissibleboolfalseAdd a close button with a fade transition.
Link*LinkConfignilTrailing action link (Text + Href).
Action*ActionConfignilPrimary + dismiss action buttons.
ListItems[]stringnilBulleted list rendered under the description.
RootClassstring""Extra classes on the alert.
Toggle Toast