Primitive contract

Badge

Names a compact status or classification with visible text and supporting tone while preserving the v0.0.2 API.

Short status or classification label · @sanchika/primitives

Purpose and semantics

Names a compact status or classification with visible text and supporting tone while preserving the v0.0.2 API.

Recommended semantic: Use span or another phrasing element; Badge adds no live-region behavior.

Anatomy

label

Visible status or classification text.

Finite variants and important states

Variant · tone: neutral, success, warning, danger, info
Variant · size: sm, md
Required states: default
Class hooks: .sk-badge · .sk-tone-neutral · .sk-tone-success · .sk-tone-warning · .sk-tone-danger · .sk-tone-info · .sk-size-sm · .sk-size-md

Composed synthetic exemplar

Rendered state matrix

Badge: 1 required state

Each specimen starts from the package-owned example and contract state inventory. Simulated pointer and focus frames are labelled; consumers still verify real interaction in context.

defaultSettled and available for its documented job.

CA review needed

Accessibility and consumer responsibility

Keyboard and screen reader

Badge adds no keyboard behavior.
Status meaning must be present in text
Consumers add live-region semantics only when a real state update requires them

Consumer owns

Supply visible status text
Announce dynamic updates when required

Mobile

Long labels wrap instead of overflowing.

Reduced motion and forced colors

No override is needed.

Text and boundary remain visible with system colors.

Compact API reference

Package: @sanchika/primitives
CSS: @sanchika/primitives/styles.css
Contract: primitiveSpecs.find((contract) => contract.name === "Badge")
Primary class: .sk-badge