Skip to content

Badge

A small label for status, counts, or categorization. Solid and soft styles, semantic colors, icons, indicators, notification counts, and animating dots.

Default Rendered example
DefaultPrimarySecondaryInfoSuccessWarningDanger
Usage Example
@badge.Badge(badge.Config{Label: "Default", Tone: badge.ToneDefault})
@badge.Badge(badge.Config{Label: "Primary", Tone: badge.TonePrimary})
@badge.Badge(badge.Config{Label: "Success", Tone: badge.ToneSuccess})
@badge.Badge(badge.Config{Label: "Danger", Tone: badge.ToneDanger})

Soft Appearance

Appearance: badge.AppearanceSoft swaps the solid fill for a subtle tinted background with a border.

Soft Appearance Rendered example
DefaultPrimarySecondaryInfoSuccessWarningDanger
Soft Appearance
@badge.Badge(badge.Config{Label: "Active", Tone: badge.ToneSuccess, Appearance: badge.AppearanceSoft})

With Icons

Pass any templ.Component as Icon to render it before the text.

With Icons Rendered example
Penguin Filter Verified Active Warning Error
With Icons
@badge.Badge(badge.Config{Label: "Verified", Tone: badge.ToneInfo, Icon: checkIcon()})

With Indicators

Indicator: true prepends a small status dot tinted to the variant.

With Indicators Rendered example
Default Primary Info Success Warning Danger
With Indicators
@badge.Badge(badge.Config{Label: "Live", Tone: badge.ToneDanger, Indicator: true})

Notification Badges

badge.NotificationBadge(n) renders a count bubble and badge.NotificationDot() a bare dot — position them on a relative parent (e.g. an icon button).

Notification Badges Rendered example
Notification Badges
<button class="relative" aria-label="notifications">
    @icons.Bell()
    @badge.NotificationBadge(5)
</button>
<button class="relative" aria-label="alerts">
    @icons.Bell()
    @badge.NotificationDot()
</button>

Animating Dots

badge.AnimatingDot(variant) renders a pulsing presence dot.

Animating Dots Rendered example
Animating Dots
@badge.AnimatingDot(badge.ToneDanger)

Sizes

Three sizes via Size: badge.SizeSM, badge.SizeMD (default), badge.SizeLG.

Sizes Rendered example
Small
Medium
Large
Sizes
<div x-data="{ selected: 'md' }">
    @badge.Badge(badge.Config{Label: "Small", Tone: badge.TonePrimary, Size: badge.SizeSM})
    @badge.Badge(badge.Config{Label: "Medium", Tone: badge.TonePrimary, Size: badge.SizeMD})
    @badge.Badge(badge.Config{Label: "Large", Tone: badge.TonePrimary, Size: badge.SizeLG})
</div>

Go API

v0.2.7

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso/components/badge
Open v0.2.7 API