A high-visibility current state for services, jobs, and environments.
NormalWarningCriticalOfflineStale
checkout-service
Healthy normal
worker-07
Attention warning
db-primary
Offline offline
<StatusWidget label="checkout-service" value="Healthy" status="normal" />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { StatusWidget } from '@chanrg/4ui';<StatusWidget label="checkout-service" value="Healthy" status="normal" />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | required | Human-readable state. |
status | HealthStatus | normal | Semantic state. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- A visually hidden status phrase supplements the status color.