UptimeBar

The statuspage strip: per-period status pills (operational, degraded, down, unknown) with a summary caption and edge labels.
The pills run in a single row, oldest on the left, colored operational green, degraded amber, down red, or unknown muted (precedence down > degraded > unknown; an unmarked period is operational). An optional caption summarizes the strip above it, and startLabel/endLabel caption the physical edges below. The strip is a time axis, so it keeps left-to-right ordering in every locale, and its accessible name tallies every status.
99.98% uptime
90 days ago
Today
iOS
99.98% uptime
90 days ago
Today
Android
99.98% uptime
90 days ago
Today
Web
tsx
<UptimeBar
label="API uptime"
caption="99.98% uptime"
startLabel="90 days ago"
endLabel="Today"
periods={Array.from({ length: 90 }, (_, i) => (i === 61 ? { down: true } : i === 78 ? { degraded: true } : {}))}
/>

Props

Prop
Description
periods
required
UptimePeriod[]
The periods to render, oldest first; each becomes one pill.
label
string
What the strip measures (e.g. "API uptime"); leads the accessible name.
caption
string
A summary line above the strip (e.g. "99.98% uptime").
startLabel
string
Caption under the strip's left (oldest) edge (e.g. "90 days ago").
endLabel
string
Caption under the strip's right (latest) edge (e.g. "Today").
compact
boolean
Density (omit for the default pill height).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

UptimeBar

Don’t
A hand-rolled row of colored Views has no accessible tally and no edge-caption anatomy.
Do
99.98% uptime
90 days ago
Today
Let the strip carry the whole anatomy: pills, summary caption, and edge labels, with the status tally in its accessible name.
← Treemap
WaterfallChart →