● Primitives / StatusIndicator

StatusIndicator.

StatusIndicator combines an animated green dot with a text label. It replaces repeated ping markup in hero, contact, and Superbloom headers.

How the primitive behaves

The outer wrapper is inline-flex with gap-2. The dot stack is aria-hidden because the label carries the status for screen readers.

Source of truth

Custom primitive in system/primitives/status-indicator. Exported from $lib/system.

Animated dot beside “Open to work” on the homepage hero and contact page.

Live meta label on the Superbloom overview and Storybook introduction.

Composes into SectionHeader or MetadataLabel meta snippets as a single unit.

Open to work

In MetadataLabel

● Intro

Open to work

Live

Absolute span with animate-ping and green-500 at 75% opacity.

Solid h-2 w-2 green circle on top of the ping.

Optional string or children snippet for text beside the dot.

Use StatusIndicator when motion plus text communicates availability or live status.
Pair with MetadataLabel or SectionHeader meta slots; avoid duplicating ping markup in routes.
Respect prefers-reduced-motion: ping is decorative; label still conveys meaning.
Do not use for static “Live” nav badges; use LiveBadge instead.
Keep labels short (Open to work, Live) so they fit metadata rows on small screens.

In practice

Hero intro meta?

label="Open to work" in MetadataLabel meta.

Contact page header?

Same label in SectionHeader meta.

Superbloom overview?

label="Live".

Design System menu?

LiveBadge without animation.

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