● Primitives / LiveBadge

LiveBadge.

LiveBadge is a compact green status pill for “live” system surfaces. It appears next to Design System in the header, footer, and mobile nav.

How the primitive behaves

LiveBadge is a span with fixed sizing and green semantic colors. It is not interactive and should sit beside text labels, not replace them.

Source of truth

Custom primitive in system/primitives/live-badge. Exported from $lib/system.

Signals that Superbloom or Storybook is live in the header and footer.

Smaller lowercase live pill beside documentation links in the design-system menu.

10px uppercase type in a green tint pill without competing with primary CTAs.

Nav label

Design System Live

Menu item

Documentation live

Visible text, default "Live". Menu items may pass label="live" with uppercase={false}.

When true, applies text-transform uppercase for nav labels.

Green background at 15% opacity with green-800 / green-300 text for light and dark.

Use LiveBadge only for live or actively maintained surfaces, not generic “new” badges.
Prefer LiveBadge over ad hoc green rounded-full spans in layout files.
Nav cluster uses uppercase Live; dropdown items use lowercase live without uppercase transform.
Do not confuse with StatusIndicator, which includes an animated dot for availability.
Import from $lib/system so Storybook and docs stay aligned with product code.

In practice

Header Design System label?

<LiveBadge /> with default label.

Docs link in menu?

label="live" uppercase={false} when item.live is true.

Open to work on hero?

StatusIndicator.

Skill on about section?

Tag.

Other primitives in the system, in the same order as the documentation sidebar.