Skip to main content

component

TuxBadge

Unified badge, tag, count, and operational lifecycle status component. Supports security classification tiers, background/job lifecycle states (with automatic spinner on running), bold solid modes, leading icons & status dots, and facet counts.

Interactive Component Playground

TuxBadge Workbench

Presets:
Active Sensor Node
Properties Inspector7 configurable knobs
Badge Labellabel
Tonetone
Sizesize
Bold Solid Modebold
false
Status Dotdot
true
Leading Iconicon
Shape Glyph (CVD)glyph
false
Dynamic Component Syntax
<tux-badge tone="brand" size="sm" dot>
  Active Sensor Node
</tux-badge>

tiers

Classification Tier

Pre-configured security classification badges according to institutional data policies.

publicinternalsensitiverestricted
<TuxBadge tier="public" />
<TuxBadge tier="internal" />
<TuxBadge tier="sensitive" />
<TuxBadge tier="restricted" />

state

Lifecycle & Editorial Status

Lifecycle states with integrated status-dot indicator and animated spinner for in-flight tasks.

queuedrunningcompletedfailedpublisheddraftexpiredverified
<TuxBadge status="queued" />
<TuxBadge status="running" />   <!-- spinner renders automatically -->
<TuxBadge status="completed" />
<TuxBadge status="failed" />
<TuxBadge status="published" />
<TuxBadge status="draft" />
<TuxBadge status="expired" />
<TuxBadge status="verified" />

emphasis

Bold / Solid Mode

High-contrast solid backgrounds for urgent callouts, prominent table headers, or critical operational flags.

BRAND SOLIDLIVE STREAMACTION REQUIREDOUTAGESCHEDULED
<TuxBadge tone="brand" bold>BRAND SOLID</TuxBadge>
<TuxBadge tone="success" bold>LIVE STREAM</TuxBadge>
<TuxBadge tone="warning" bold>ACTION REQUIRED</TuxBadge>
<TuxBadge tone="danger" bold>OUTAGE</TuxBadge>
<TuxBadge tone="info" bold>SCHEDULED</TuxBadge>

affordances

Leading Icons & Status Dots

Explicit dot prop with pulsing animation on active/critical tones, or icon prop for semantic icons.

Active SensorAlert TriggeredSecuredPostgreSQLDraft Spec
<TuxBadge tone="success" dot>Active Sensor</TuxBadge>
<TuxBadge tone="danger" dot>Alert Triggered</TuxBadge>
<TuxBadge tone="brand" icon="lucide:shield-check">Secured</TuxBadge>
<TuxBadge tone="info" icon="lucide:database">PostgreSQL</TuxBadge>
<TuxBadge tone="neutral" icon="lucide:file-text">Draft Spec</TuxBadge>

colorblindness & cvd

Multi-Channel Redundant Shape Badges

When operational state or security severity is communicated via color alone, users with color vision deficiencies (Protanopia / Deuteranopia / Tritanopia) cannot reliably distinguish healthy from failing states. Passing glyph replaces or augments status dots with shape-coded semantic micro-glyphs (check-circle, alert-octagon, alert-triangle, shield-check).

LIFECYCLE:completedrunningfaileddraftverified
SEMANIC TONES:PASSEDREVIEWCRITICALNOTICE
<!-- Operational Lifecycle Badges with Multi-Channel Shape Redundancy -->
<TuxBadge status="completed" glyph />
<TuxBadge status="running" glyph />
<TuxBadge status="failed" glyph />
<TuxBadge status="draft" glyph />
<TuxBadge status="verified" glyph />

<!-- Semantic Tones with Shape Glyphs -->
<TuxBadge tone="success" glyph>PASSED</TuxBadge>
<TuxBadge tone="warning" glyph>REVIEW</TuxBadge>
<TuxBadge tone="danger" glyph>CRITICAL</TuxBadge>
<TuxBadge tone="info" glyph>NOTICE</TuxBadge>

machine tokens

Tags

Monospace + outline to read as machine tokens, not editorial copy.

topic:safetytopic:mobilitytopic:bridgeslicense:cc-byformat:pdf
<TuxBadge kind="tag">topic:safety</TuxBadge>
<TuxBadge kind="tag">topic:mobility</TuxBadge>
<TuxBadge kind="tag">license:cc-by</TuxBadge>

facet · count

Counts

pdf42md11xlsx3csv1204
<TuxBadge kind="count" :count="42">pdf</TuxBadge>
<TuxBadge kind="count" :count="11">md</TuxBadge>
<TuxBadge kind="count" :count="3">xlsx</TuxBadge>
<TuxBadge kind="count" :count="1204">csv</TuxBadge>