Status Table
Summarize the state of several services or resources.
Preview
Import
import { StatusTable } from "@sigil-ui/components";Usage
<StatusTable
title="System Status"
services={[
{ name: "API", status: "operational", uptime: "99.98%", lastIncident: "14 days ago" },
{ name: "Database", status: "operational", uptime: "99.99%" },
{ name: "CDN", status: "degraded", uptime: "99.90%", lastIncident: "2 hours ago" },
{ name: "Auth", status: "operational", uptime: "99.95%", lastIncident: "7 days ago" },
{ name: "Webhooks", status: "maintenance", lastIncident: "Now" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
services (required) | ServiceEntry[] | — | Services configuration. |
title | string | — | Heading displayed in the component. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-success | Success |
--s-warning | Warning |
--s-error | Error |
--s-info | Info |
--s-radius-card | Radius card |
--s-border-style | Border style |
--s-border | Border |
--s-surface | Surface |
--s-shadow-sm | Shadow sm |
--s-text | Text |
--s-text-muted | Text muted |
--s-surface-elevated | Surface elevated |