UptimeBar

Chart
The statuspage strip: per-period status pills (operational, degraded, down, unknown) with a summary caption and edge labels.
src/charts/uptime-bar
View in Charts

Playground

Every control sets a real prop of UptimeBarProps. The JSX below updates as you go.
API
99.98% uptime
90 days ago
Today
Props
compact
boolean
label
string
caption
string
JSX · UptimeBarProps
<UptimeBar label="API" caption="99.98% uptime" />

Variants

2 examples from src/charts/uptime-bar/uptime-bar.md, each rendered live from its own JSX.
CDN uptime
Compact
<UptimeBar
label="CDN uptime"
compact
periods={Array.from({ length: 60 }, (_, i) => (i === 40 ? { degraded: true } : {}))}
/>
Worker uptime
With unknown periods
<UptimeBar
label="Worker uptime"
periods={Array.from({ length: 30 }, (_, i) => (i < 6 ? { unknown: true } : {}))}
/>

Anatomy

API
99.98% uptime
90 days ago
Today
1
Strip
2
Degraded period
3
Healthy period
4
Range labels
Dimmed parts appear only in some states or variants.

Props

10 props on UptimeBarProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
6 props
periods *
UptimePeriod[]
–
The periods to render, oldest first; each becomes one pill.
label
string
–
What the strip measures (e.g. "API"); shown in the header and leading the accessible name.
caption
string
–
A summary at the header's right (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").
midLabel
string
–
Caption centred under the strip, between the edge captions (e.g. "1 incident · 2 degraded days").
Density
4 props
compact
boolean
false
detailed
boolean
false
Display header and taller history marks for a status overview.
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.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
image
img
ARIA on web
aria-label
From the docs
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.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
CDN uptime
Web
control 10 · field 10 · card 16 · Instrument Sans
CDN uptime
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
CDN uptime
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<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 } : {}))}
/>
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.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--bad
--fd
--fm
--ft
--ok
--tx3
--warn

Related components