Incident Banner
Slim dismissible incident alert bar with the incident start time, a status page link, and a subscribe affordance.
Slim dismissible incident alert bar with the incident start time, a status page link, and a subscribe affordance.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Incident Banner is a slim top-of-page alert: a filled dot, We are investigating elevated latency on the API, the incident start time Jun 13 14:02 UTC, and two inline links to the Status page and Subscribe. A ghost icon button at the right lets the user dismiss it with a state-driven X. The block uses a context note above the banner and a restore button after dismissal so the interaction is visible in the preview.
The dismissed state is useState, making this a client component. The banner body is static markup so it works as a blueprint without any API wire-up.
Reach for this block at the very top of the app shell content area during an active incident, above all other page content. Wire dismissed to localStorage or a session flag so it does not reappear after the user closes it mid-incident.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the active-incident dismissible alert. Other banner shapes:
Tip: date the incident in the banner itself, We are investigating tells users nothing; Jun 13 14:02 UTC tells them how long you have been watching.