Badge

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

DefaultPrimarySecondaryInfoSuccessWarningDanger

Usage Example

@badge.Badge(badge.Config{Label: "Default", Variant: badge.Default})
@badge.Badge(badge.Config{Label: "Primary", Variant: badge.Primary})
@badge.Badge(badge.Config{Label: "Success", Variant: badge.Success})
@badge.Badge(badge.Config{Label: "Danger", Variant: badge.Danger})

Soft Style

Style: badge.StyleSoft swaps the solid fill for a subtle tinted background with a border.

DefaultPrimarySecondaryInfoSuccessWarningDanger

Soft Style

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

With Icons

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

Penguin Filter Verified Active Warning Error

With Icons

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

With Indicators

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

Default Primary Info Success Warning Danger

With Indicators

@badge.Badge(badge.Config{Label: "Live", Variant: badge.Danger, 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

<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

@badge.AnimatingDot(badge.Danger)

Sizes

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

Size

sm md lg

Small

Medium

Large

Sizes

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

API Reference

Prop	Type	Default	Description
`Label`	`string`	`""`	Badge label text.
`Variant`	`Variant`	`Default`	Color: "default", "inverse", "primary", "secondary", "info", "success", "warning", "danger".
`Style`	`Style`	`StyleSolid`	Fill style: "solid" or "soft".
`Size`	`Size`	`SizeMD`	Size: "sm", "md", "lg".
`Icon`	`templ.Component`	`nil`	Optional leading icon component.
`Indicator`	`bool`	`false`	Prepend a small status dot.
`IndicatorColor`	`string`	`""`	Override the indicator dot color.
`RootClass`	`string`	`""`	Extra classes on the badge.

Avatar Banner