Badge

Small status and label indicators. Wraps a <span class="badge"> element. Supports color, variant, and size props.

Default

No color or variant — the base badge style.

Sizes

Five sizes: xs, sm, md (default), lg, xl.

Colors

All eight semantic color tokens, solid (default) variant.

Variants

Five variants: solid, outline, soft, dash, ghost.

Empty (dot) badges

No slot content renders a small status dot. Useful for notification indicators.

With icons

SVG icons inline with badge text.

Badge in text

Badges scale with surrounding text when nested in headings.

Badge in a button

Common notification pattern — button with a counter badge.