Badge

Badges are tiny inline status markers. In v0.1 the public contract is intentionally small: a base badge shell plus the soft surface variant.

Badge API

Class	Used for	Notes
`.sp-badge`	Base inline badge shell	Provides sizing, inline layout, radius, and text weight. Leaves surface treatment to variants.
`.sp-badge--soft`	Default surfaced badge	Adds `--sp-elev` background, text color, and `--sp-border-1`.

Base shell

Draft New

Use the base class when your app or a variant supplies the surface treatment.

Soft badge

Stable v0.1 Docs

Good for version chips, subtle state tags, and docs metadata.

<span class="sp-badge sp-badge--soft">Stable</span>

Keep badges short. If the content starts reading like a button, switch to a button or chip pattern instead of overloading the badge.