'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Data display
UptimeBar
A service's recent history as thin bars, one per day: green when it worked, amber when it was slow, red when it was down.
import { UptimeBar } from '@alea/ui';
Examples
A status page
One bar per day. The whole bar is read as a sentence with the uptime and the bad days.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-status-danger…--alea-status-success…--alea-status-warning…--alea-surface-raised…
Props
UptimeBar props
A service's recent history as thin bars, one per day: green, amber when it was slow, red when it was down. Read as one sentence.
| Prop | Type | Default | Description |
|---|---|---|---|
daysrequired | "ok" | "degraded" | "down" | "none"[] | - | One state per day (or hour), oldest first. |
labelrequired | string | - | What it measures: "API gateway". |
className | string | - | Extra class names for the root element. |
unit | string | 'day' | What one bar is: "day" (default) or "hour". |
uptime | number | - | The uptime to say, e.g. 99.98 (percent). Without it the bar is described by its incidents. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Variants
daysokdegradeddownnone"[]- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-uptime- Data attributes
data-state=degradeddata-state=downdata-state=none
Accessibility
- One image read as a sentence: the service, its uptime and how many days were slow or down.
- States differ in color and are summed up in text, never color alone.
Do and don't
Do
- Show 30 to 90 days.
- Put the current status as text next to it.
Don't
- Don't use it for values that are not a state per period: use Sparkline.
In Figma
Uptime bar with Days (30, 45, 90).