Status Table
A service health status table with colored indicators, uptime tracking, and incident dates.
Preview
Import
import { StatusTable } from "@sigil-ui/components";Usage
<StatusTable
title="System Status"
services={[
{ name: "API", status: "operational", uptime: "99.98%" },
{ name: "CDN", status: "degraded", uptime: "99.90%", lastIncident: "2h ago" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
services | ServiceEntry[] | — | Service rows with name, status, uptime, lastIncident |
title | string | — | Optional header title |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-success | Operational status |
--s-warning | Degraded status |
--s-error | Outage status |
--s-info | Maintenance status |
--s-border | Table borders |
--s-surface | Background |
--s-surface-elevated | Row hover |
--s-text | Service name and title |
--s-text-muted | Column headers, uptime, dates |
--s-font-mono | Uptime and date font |
--s-radius-card | Container radius |
--s-shadow-sm | Container shadow |
--s-border-style | Border style |
--s-duration-fast | Hover transition |