Feedback
Badge
A status pill with a leading dot and its word, in the fixed status vocabulary; StatusBadge picks the colour from an API status word.
Examples
Variants
CompletedFailedRunningDegradedSkippedmainv2.4.1
<Badge variant="success">Completed</Badge>
<Badge variant="error">Failed</Badge>
<Badge variant="running">Running</Badge>
<Badge variant="warning">Degraded</Badge>
<Badge>Skipped</Badge>
<Pill>main</Pill>From a status word
completedrunningfailedskipped
<StatusBadge status={run.status} /> // "completed" | "running" | "failed" | "skipped" | ...Guidelines
- success = Completed, error = Failed, running = Running (the dot pulses), warning = Degraded, neutral = Skipped or Idle.
- The word is never omitted: success and danger differ by hue alone.
- StatusBadge maps the words the backup API and the Observatory produce (completed, running, failed, skipped, ...) to a variant.
- Pill is the plain tag for branches, versions and tool names.
Props
| Prop | Type | What it does |
|---|---|---|
| variant | "success" | "error" | "running" | "warning" | "neutral" | Badge only; defaults to neutral. |
| status | string | null | undefined | StatusBadge only: the word to map and show. |
| statusVariant(status) | function | The mapping, exported for lists and charts. |