Incident Status Banner React component
A calm site-wide status bar: a live dot, a clear severity, the latest update time, and a timeline that opens over the page without moving it.
About the Incident Status Banner component
Incident Status Banner tells people what's wrong before they start wondering. A coloured dot and a plain sentence say how serious it is, and the button shows when you last posted an update.
Open it and the full timeline appears over the page, so reading it doesn't push anything around. It closes on Escape or a click elsewhere.
When to use it
Use it inside apps and dashboards during incidents and planned maintenance.
Show it only while something is happening. A permanent status bar soon stops being read.
Installation
Add the Incident Status Banner component to your project with the shadcn CLI. It lands in components/incident-status-banner.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/incident-status-bannerProps
<IncidentStatusBanner /> accepts 7 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| level | "operational" | "maintenance" | "degraded" | "outage" | "degraded" |
| title | string | "Sync is running slowly for some workspaces" |
| updates Newest first. The panel opens from the banner, over the page. | { time: string; state: string; text: string }[] | UPDATES |
| statusUrl Link to your full status page. | string | "#" |
| dismissible | boolean | true |
| onDismiss | () => void | — |
- theme"dark" | "light"Default: "dark"
- level"operational" | "maintenance" | "degraded" | "outage"Default: "degraded"
- titlestringDefault: "Sync is running slowly for some workspaces"
- updates
Newest first. The panel opens from the banner, over the page.
{ time: string; state: string; text: string }[]Default: UPDATES - statusUrl
Link to your full status page.
stringDefault: "#" - dismissiblebooleanDefault: true
- onDismiss() => void
Incident Status Banner FAQ
- What levels are there?
- operational, maintenance, degraded and outage, each with its own colour and label.
- Is it announced to screen readers?
- Yes. The bar uses role status, so changes are read out politely.
- Does the panel move the page?
- No. It opens on top, anchored to the bar.
- What about reduced motion?
- The dot stops pulsing and everything else works the same.
