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 badge

Usage

open demo ↗

lotusui.Badge(th, "Badge", lotusui.BadgeOpts{})

Secondary

Neutral tint + ink — metadata that shouldn't shout.

open demo ↗

lotusui.Badge(th, "Secondary", lotusui.BadgeOpts{Variant: lotusui.BadgeSecondary})

Destructive

Danger tint + danger ink.

open demo ↗

lotusui.Badge(th, "Destructive", lotusui.BadgeOpts{Variant: lotusui.BadgeDestructive})

Outline

Border + ink, no fill.

open demo ↗

lotusui.Badge(th, "Outline", lotusui.BadgeOpts{Variant: lotusui.BadgeOutline})

Ghost

Ink only — no fill, no border.

open demo ↗

lotusui.Badge(th, "Ghost", lotusui.BadgeOpts{Variant: lotusui.BadgeGhost})

With icon

Icon renders an embedded icon before the text, in the badge's ink.

open demo ↗

lotusui.Badge(th, "Verified", lotusui.BadgeOpts{Icon: lotusui.IconAccept})

Spinner

Start/End render arbitrary widgets around the text — a working state's spinner.

open demo ↗

lotusui.Badge(th, "Deleting", lotusui.BadgeOpts{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.

open demo ↗

lotusui.Badge(th, "Teal", lotusui.BadgeOpts{Color: lotusui.Teal})
lotusui.Badge(th, "Pink", lotusui.BadgeOpts{Color: lotusui.Pink})

Status

The status pairs are tokens, not schemes — set Bg/Fg directly.

open demo ↗

p := th.Palette
lotusui.Badge(th, "Healthy", lotusui.BadgeOpts{Bg: p.SuccessBg, Fg: p.Success})
lotusui.Badge(th, "Error", lotusui.BadgeOpts{Bg: p.DangerBg, Fg: p.Danger})

Sizes

open demo ↗

lotusui.Badge(th, "New", lotusui.BadgeOpts{Size: lotusui.Size2XS})
lotusui.Badge(th, "New", lotusui.BadgeOpts{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.