Status page
Where things stand: the overall state in words and colour, each service on its line, the incidents — or, for what is not built yet, its progress and how to hear about it.
Web only — React, from @krizaka/ui/status-page. Beta: its API may still change in a minor version.
When to use
- A service status page.
- An « under construction » page that says honestly what is coming.
When not to use
- For what changed over time.Use instead: Changelog page
- For a page that does not exist.Use instead: Error page
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { StatusPage } from "@krizaka/ui/status-page";Examples
Status
Three services, one slower than usual.
Status
How things are running
- krizaka.comOperational
- OrochiaOperational
- Video deliverySlower than usual
Under construction
Yazakia on its way: progress and how to hear about it.
Yazakia
On its way
Meet by talking first. The first build reaches testers this winter.
Props
A status page — or an « under construction » one: the overall state, each service, then incidents or progress.
| Prop | Type | Default | Description |
|---|---|---|---|
staterequired | ServiceState | — | The overall state. |
stateLabelrequired | ReactNode | — | The overall state, in words (All systems operational). |
titlerequired | ReactNode | — | The page's h1 (Status, Yazakia is on its way). |
aside | ReactNode | — | Beside the hero: a bird (the pigeon that delivers, the duck that builds). |
back | { href: string; label: string; } | — | The way back. |
checked | ReactNode | — | When it was checked (Checked 2 min ago). |
eyebrow | ReactNode | — | A mono line above the title. |
lead | ReactNode | — | One sentence under it. |
linkAs | LinkComponent | — | The app's link component (Next's Link). |
services | readonly { id: string; name: ReactNode; state: ServiceState; label: ReactNode; }[] | — | The services and their states, in words: { id, name, state, label }. |
servicesLabel | string | Services | The services list's accessible name (Services). |
Accessibility
- The overall state is a
statusregion. - Each service says its state in words beside its dot.
Best practices
- Always say the state in words; the colour only repeats it.
- Under construction: show progress and a way to follow, never a fake screen.
- Words and content arrive as props; the motion is the platform's (
[data-reveal], still under reduced motion).
Related components
Generated from the code of @krizaka/ui 2.10.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Product page
A product's overview in its brand: split hero with facts and the product alive, the traps it removes as compact argument cards, its decisions with their cost, the promise a bird keeps, the closing call.
Card
The composed chassis of every card: a media with overlays, a body with a title, a description, stats and a footer.