Components

VersionBadge

Monospace version tag for design iterations, with lifecycle status.

Preview

components/content/VersionBadge.jsx

v1v2v3.2v4-rc

Usage

src/components/ui/VersionBadge.tsx

tsx

import { VersionBadge } from "@/components/ui/VersionBadge";

<VersionBadge version="v1" status="archived" />
<VersionBadge version="v2" status="explored" />
<VersionBadge version="v3.2" status="current" />

API

props

Prop	Type	Default	Description
version	string	—	The tag — rendered in the mono stack with tabular numerals.
status	"current" \| "explored" \| "archived" \| null	null	Lifecycle dot: live green / craft steel / subtle grey.

Tokens consumed

semantic only

--signal-live--signal-craft--color-fg-subtle--color-bg-hover--color-border--text-2xs--radius-xs