Badge

View Original

A badge is a small label that displays additional information, status, or counts. Used for notifications, status indicators, and categorization.

Goshtoso Component

Go + Templ

Solid Badges

DefaultPrimarySecondaryInfoSuccessWarningDanger

Soft Style Badges

DefaultPrimarySecondaryInfoSuccessWarningDanger

With Icons

Penguin Filter Verified Active Warning Error

With Indicators

Default Primary Info Success Warning Danger

Notification Badges

Animating Dots

Sizes

SmallMediumLarge

Usage Example

// Simple Badge
@badge.Badge(badge.Config{
    Text:    "New",
    Variant: badge.Primary,
})

// Soft Style Badge
@badge.Badge(badge.Config{
    Text:    "Active",
    Variant: badge.Success,
    Style:   badge.StyleSoft,
})

// Badge with Icon
@badge.Badge(badge.Config{
    Text:    "Verified",
    Variant: badge.Info,
    Icon:    checkIcon,
})

// Badge with Indicator
@badge.Badge(badge.Config{
    Text:      "Live",
    Variant:   badge.Danger,
    Indicator: true,
})

// Notification Badge on Button
<button class="relative" aria-label="notifications">
    @icons.Bell()
    @badge.NotificationBadge(5)
</button>

// Notification Dot
<button class="relative" aria-label="messages">
    @icons.Message()
    @badge.NotificationDot()
</button>

// Animating Notification Dot
@badge.AnimatingDot(badge.Danger)

Avatar Banner