Banner

A prominent page/section message for announcements, promotions, alerts, and cookie consent. Dismissible by default; supports CTAs, semantic colors, and a cookie-consent mode.

Usage Example

@banner.Banner(banner.Config{
    Description: "Limited Time Offer! Explore exclusive deals & savings",
})

Persistent (Non-dismissible)

Persistent: true removes the dismiss control so the message stays put.

Persistent (Non-dismissible)

@banner.Banner(banner.Config{
    Description:       "This banner cannot be dismissed by users",
    Persistent: true,
})

With CTA Button

Attach a CTA config for an inline call-to-action (Href for a link, OnClick for an action).

With CTA Button

@banner.Banner(banner.Config{
    Description: "Get Fit Anywhere, Anytime 💪",
    CTA: &banner.CTAConfig{
        ActionLabel: "Start free trial",
        Href: "/signup",
    },
})

Color Variants

Set Variant for semantic coloring: Default, Primary, Info, Success, Warning, Danger.

Color Variants

@banner.Banner(banner.Config{Description: "Success! Your changes have been saved", Variant: banner.Success})
@banner.Banner(banner.Config{Description: "Warning: Please review your settings", Variant: banner.Warning})

CookieBanner: true plus a CookieConfig renders a corner-anchored consent card with accept/reject actions.

Cookie Consent

@banner.Banner(banner.Config{
    CookieBanner: true,
    Position:     banner.PositionRelative,
    Description:         "We use cookies to improve your experience.",
    CookieConfig: &banner.CookieBannerConfig{
        Title:        "Cookie Settings",
        AcceptLabel:  "Accept All",
        RejectLabel:  "Decline",
        AcceptAction: "acceptCookies()",
        RejectAction: "show = false",
    },
})

API Reference

Prop	Type	Default	Description
`Description`	`string`	`""`	Banner message text.
`Variant`	`Variant`	`Default`	Color: "default", "primary", "info", "success", "warning", "danger".
`Position`	`Position`	`PositionRelative`	Layout: "relative" (inline) or "fixed" (pinned to top).
`Persistent`	`bool`	`false`	Remove the dismiss control.
`DismissAction`	`string`	`""`	Extra Alpine expression run when dismissed.
`CTA`	`*CTAConfig`	`nil`	Inline call-to-action (ActionLabel + Href or OnClick).
`CookieBanner`	`bool`	`false`	Render as a corner cookie-consent card.
`CookieConfig`	`*CookieBannerConfig`	`nil`	Cookie card content + accept/reject actions.
`RootClass`	`string`	`""`	Extra classes on the banner.

Badge Card