Component

Badge

Soft-tinted pill for status/counts, sharing the same 6 tones as Button.

Tones

DefaultEarthForestWaterSunFire

SoftSolidBordered

RoundedSquare

Prop	Type	Default	Description
tone	ComponentTone	"default"	Decorative color, paired with the appearance below.
appearance	"soft" \| "solid" \| "bordered"	"soft"	Fill style.
shape	"rounded" \| "square"	"rounded"	Corner shape.
onRemove	() => void	None	Adds a removable X control when provided.
removeLabel	string	"Remove"	Accessible name for the remove control.
className	string	None	Additional classes applied to the component root.

tone"default"

ComponentTone

Decorative color, paired with the appearance below.

appearance"soft"

"soft" | "solid" | "bordered"

Fill style.

shape"rounded"

"rounded" | "square"

Corner shape.

onRemoveNone

() => void

Adds a removable X control when provided.

removeLabel"Remove"

string

Accessible name for the remove control.

classNameNone

string

Additional classes applied to the component root.