Badge
Small rounded labels: four variants × seven sizes × any color.
A small rounded label for counts, statuses and health. The status doctrine holds whatever the colors: tinted pill + deep ink, never saturated fill + white text.
Installation
Use the module import (the default), or own the source: lotusui add
vendors the component into your app and lotusui update keeps the copy mergeable —
see Registry.
go get github.com/ikaito-com/lotusui
# or vendor the source into your app:
go run github.com/ikaito-com/lotusui/cmd/lotusui add badgeUsage
Secondary
Neutral tint + ink — metadata that shouldn't shout.
Destructive
Danger tint + danger ink.
lotusui.Badge(th, "Destructive", lotusui.BadgeProps{Variant: lotusui.BadgeDestructive})Outline
Border + ink, no fill.
Ghost
Ink only — no fill, no border.
With icon
Icon renders an embedded icon before the text, in the badge's ink.
Spinner
Start/End render arbitrary widgets around the text — a working state's spinner.
lotusui.Badge(th, "Deleting", lotusui.BadgeProps{Variant: lotusui.BadgeDestructive,
Start: lotusui.SpinnerTint(th, 12, th.Palette.Danger)})Color
Color re-colors the badge from any ColorScale, the
pastel way — tinted fill with deep same-hue ink.
lotusui.Badge(th, "Teal", lotusui.BadgeProps{Color: lotusui.Teal})
lotusui.Badge(th, "Pink", lotusui.BadgeProps{Color: lotusui.Pink})Status
The status pairs are tokens, not schemes — set Bg/Fg
directly.
p := th.Palette
lotusui.Badge(th, "Healthy", lotusui.BadgeProps{Bg: p.SuccessBg, Fg: p.Success})
lotusui.Badge(th, "Error", lotusui.BadgeProps{Bg: p.DangerBg, Fg: p.Danger})Sizes
lotusui.Badge(th, "New", lotusui.BadgeProps{Size: lotusui.Size2XS})
lotusui.Badge(th, "New", lotusui.BadgeProps{Size: lotusui.Size2XL})API
| Option | Type | Description |
|---|---|---|
Variant | BadgeVariant | BadgeDefault (default), BadgeSecondary, BadgeDestructive, BadgeOutline, BadgeGhost. |
Size | Size | The shared size presets (Size2XS–Size2XL). |
Color | ColorScale | Re-colors the badge the pastel way (SoftScheme) from any scale. |
Scheme | *Scheme | Wins over Color: full manual slot control. |
Bg / Fg | color.NRGBA | Raw override for token pairs (statuses); both set wins over everything. |
Icon | string | Embedded icon before the text, in the badge's ink. |
Start / End | layout.Widget | Arbitrary leading/trailing widgets — a Spinner; the widget owns its color. |