StatusBadge
A badge that shows a state with a tone, an icon, and text.
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
statusKeywhen the state comes from an API or permission enum; usestatusfor page-local decisions. - Don't rely on color alone; write complete labels such as “Sync healthy” or “Access denied”.
- Use
osonly when the platform changes what the state means. - Put primary actions on a
TxButtonbeside the badge; never make the badge the only control.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | required | Visible label. |
icon | string | '' | 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. |
osOnly | boolean | false | Shows only the platform icon, hiding the status icon. |
Events
| Event | Payload | Description |
|---|---|---|
click | MouseEvent | Fires on click, or on Enter / Space when the badge acts as a button. |
CSS Variables
| Variable | Default | Description |
|---|---|---|
--tx-status-chip-size | 18px (sm: 15px) | Diameter of the status disc, which scales the glyph; set on the root by the size class. |
Overview
- Without a click listener, the root is
role="status"; with@click, it becomes a focusablerole="button"that Enter / Space activate. statuswins overstatusKey, which mapsgranted→ 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, warningi-carbon-time, dangeri-carbon-close, infoi-carbon-information. mutedhas no glyph and renders an empty dashed ring; passingiconrestores the filled disc.osOnlyhides 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