Skip to content

Badge

Stable Available in release assets

Present a compact inline status or category label without replacing meaningful text or native semantics.

Badge primary example

Show code
<div class="thin-cluster">
  <span class="thin-badge">New</span>
  <span class="thin-badge" data-tone="success">In stock</span>
  <span class="thin-badge" data-tone="warning">Low stock</span>
  <span class="thin-badge" data-tone="danger">Expired</span>
</div>

Each authored example uses the production assets and includes copyable markup.

Default badge

Accent-toned inline status for short labels.

Show code
<span class="thin-badge">Preview</span>

Semantic tones

Success, warning, and danger variants reassign badge configuration variables.

Show code
<div class="thin-cluster">
  <span class="thin-badge">New</span>
  <span class="thin-badge" data-tone="success">In stock</span>
  <span class="thin-badge" data-tone="warning">Low stock</span>
  <span class="thin-badge" data-tone="danger">Expired</span>
</div>

Registry status badges

Roadmap and catalog pages pair data-status with theme-owned presentation.

Show code
<span class="thin-badge" data-status="stable">Stable</span>
<span class="thin-badge" data-status="preview">Preview</span>

Anatomy

  • Native .thin-badge host
  • Visible label text
  • Optional data-tone tone
  • Optional data-status for registry presentation

Variants and sizes

  • Default — shown above
  • Success — shown above
  • Warning — shown above
  • Danger — shown above
  • Registry stable — shown above
  • Registry preview — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Default
  • Long localized label
  • Adjacent punctuation
  • Inside a card or table cell
  • Narrow container
  • 200% and 400% zoom
  • Forced colors

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Badges are presentational text. Any action belongs to a separate native link or button.

Accessibility

Keep the visible badge text meaningful and never rely on color alone. Pair tone with words such as Paid, Low stock, or Expired.

Contract
NATIVE
Basis
Styles native HTML elements; no APG widget

API

Use unregistered thin-badge with authored text. Set data-tone="success|warning|danger" for semantic tones or data-status for registry pages. data-variant accepts success, warning, and danger as an alias of data-tone.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Without Thin-Sky CSS, the badge text remains readable inline content.

Assets and dependencies

  • /components.css

Dependencies: None

Source: packages/ui/src/items/badge/style.ts

Stability evidence

  • Tone and registry-status variants with non-color state cues: test:tests/unit/library/overlays-feedback-stable.test.ts
  • Complete item-specific API, fallback, and difficult-state documentation: test:tests/unit/library/overlays-feedback-stable.test.ts
  • Cross-theme, density, localized, narrow-container, zoom, and forced-colors fixture: review:site/src/pages/quality/index.astro#quality-review

Composition

Derived from the examples and style specs, not authored.

Composes

Used by