Tuff
|Docs
Components/StatusBadge

StatusBadge

A badge that shows a state with a tone, an icon, and text.

VerifiedSince 0.3.4

Usage

Status Signals

status sets the tone; muted renders an empty dashed ring with no glyph.

Loading demo...

Dashboard Operations Status

Works with TxStatCard and TxProgressBar to summarize release, build, and sync health.

Loading demo...

Status Row

Loading demo...

Best Practices

  • Use statusKey when the state comes from an API or permission enum; use status for page-local decisions.
  • Don't rely on color alone; write complete labels such as “Sync healthy” or “Access denied”.
  • Use os only when the platform changes what the state means.
  • Put primary actions on a TxButton beside the badge; never make the badge the only control.

API Reference

Props

PropTypeDefaultDescription
textstringrequiredVisible label.
iconstring''Custom icon class that replaces the tone's default glyph.
status'success' | 'warning' | 'danger' | 'info' | 'muted'-Explicit tone; takes precedence over statusKey.
statusKey'granted' | 'denied' | 'notDetermined' | 'unsupported' | string''Permission or status key mapped to a tone.
size'sm' | 'md''md'Badge density.
os'macos' | 'windows' | 'linux'-Shows a platform icon before the status icon.
osOnlybooleanfalseShows only the platform icon, hiding the status icon.

Events

EventPayloadDescription
clickMouseEventFires on click, or on Enter / Space when the badge acts as a button.

Overview

  • Without a click listener, the root is role="status"; with @click, it becomes a focusable role="button" that Enter / Space activate.
  • status wins over statusKey, which maps granted → success, denied → danger, notDetermined → warning, unsupported → muted, and anything else to info.
  • Default glyphs are solid, since the disc supplies the enclosing circle: success i-carbon-checkmark, warning i-carbon-time, danger i-carbon-close, info i-carbon-information.
  • muted has no glyph and renders an empty dashed ring; passing icon restores the filled disc.
  • osOnly hides the status icon but keeps the text.

Technologies

  • The disc uses a separate --tx-status-chip-* ramp, not --tx-color-*, so knocked-out glyphs stay at or above 3:1; high-contrast dark inverts it to a light disc with a dark glyph.
  • The label is monospace, on a 14% status-color fill with a 32%, 1px inset ring that takes no layout space.
  • Source: packages/tuffex/packages/components/src/status-badge/.
查看源码
packages/tuffex/packages/components/src/status-badge/index.ts