Goshtoso PenguinUI

Alert

View Original

Alerts display important messages to the user. They come in four color variants (info, success, warning, danger) and support dismiss functionality, action links, action buttons, and list content.

Goshtoso Component

Go + Templ

Default Alert

Dismissible Alert (with Transition)

Alert with Link

Alert with List

Alert with Action Buttons

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

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

// Alert with Link
@alert.Alert(alert.Config{
    Title:       "Update Available",
    Description: "A new version is available.",
    Variant:     alert.Info,
    Link: &alert.LinkConfig{
        Text: "Details",
        Href: "#",
    },
})

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

// Alert 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",
    },
})
Triplet Modal

This site uses localStorage to remember your theme preference. No tracking cookies.