DeployStatus
deploy-statusCommunicates queued, building, live, failed, canceled, or skipped deployment states.
Usage
Basic usage
Pass status render badge soft fill logo, building status icon spin.
<>
<DeployStatus status="building" />
<DeployStatus status="ready" />
<DeployStatus status="error" />
</>Six-state spectrum
Covers queuing/building/online/failure/cancellation/skipping the full life cycle.
<>
{(["queued","building","ready","error","canceled","skipped"] as const).map((s) => (
<DeployStatus key={s} status={s} />
))}
</>Morphological variant
variant dot + text (building pulse) / icon only (compact cell).
<>
<DeployStatus status="building" variant="dot" />
<DeployStatus status="ready" variant="dot" />
<DeployStatus status="ready" variant="icon" />
<DeployStatus status="error" variant="icon" />
</>Small size · Inside the line
size="sm" Embed text stream.
Last deployed Ready , preview environment Building
<p>Last deployment <DeployStatus status="ready" size="sm" /></p>When to use
Use DeployStatus for a build or deployment moving from queued through building to ready, error, canceled, or skipped. Use StatusDot for a service's current health instead of a deployment lifecycle.
Import
import { DeployStatus } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| status* | "queued" | "building" | "ready" | "error" | "canceled" | "skipped" | — | Deployment lifecycle state. |
| variant | "badge" | "dot" | "icon" | "badge" | Soft badge, dot with text, or icon-only presentation. |
| size | "sm" | "md" | "md" | Component size. |
| spin | boolean | true | Spins the building icon. |
| className | string | — | Custom class name. |
Slots
| Slot | Type | Description |
|---|---|---|
| label | ReactNode | Replaces the localized status label. |
Pitfalls
DeployStatus describes one deployment's lifecycle, not service health. Built-in labels follow ConfigProvider; use label only for a context-specific override.
Related
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
<DeployStatus status={deploy.status} />