Badge

Small inline labels for status, counts, and categories. Supports semantic color variants and an optional status dot.

Variants

Default Secondary Success Warning Error Info Outline
Component
@badge.Badge(badge.Props{Variant: badge.VariantDefault}) { Default }
@badge.Badge(badge.Props{Variant: badge.VariantSecondary}) { Secondary }
@badge.Badge(badge.Props{Variant: badge.VariantSuccess}) { Success }
@badge.Badge(badge.Props{Variant: badge.VariantWarning}) { Warning }
@badge.Badge(badge.Props{Variant: badge.VariantDestructive}) { Error }
@badge.Badge(badge.Props{Variant: badge.VariantInfo}) { Info }
@badge.Badge(badge.Props{Variant: badge.VariantOutline}) { Outline }

With Status Dot

Online Offline Degraded
Component
@badge.Badge(badge.Props{Variant: badge.VariantSuccess, Dot: true}) { Online }
@badge.Badge(badge.Props{Variant: badge.VariantDestructive, Dot: true}) { Offline }
@badge.Badge(badge.Props{Variant: badge.VariantWarning, Dot: true}) { Degraded }

Props

PropTypeDefaultDescription
Variant VariantVariantDefaultColor scheme: default, secondary, success, warning, destructive, info, outline
Dot boolfalseShows a colored status dot before the label text
Class string""Extra Tailwind classes
Attrs templ.AttributesnilSpread any HTML attribute