Banner Stack Window Error Block for React

Because hiding the one notice about a live outage helps nobody. It has no dismiss button and its text gives the reason, so it doesn't look broken. Everything lower in weight can be put away, and the choice is typed in each banner's level: only critical has the Shine Button instead of a dismiss button. Keep a banner like it for failures that affect everyone, not for announcements.

By a word in a small Badge ("Critical", "Warning", "Info"), a different icon shape for each, and the critical banner's heavier edge. The one status color on the block is the critical icon; every word is in the text color, so the stack reads the same in every theme and for everyone.

Dismissing folds the banner away by its height, keeps it in the page's markup but out of reach (it's inert and hidden) and moves focus to the "Dismissed" row, where a status line says what you put away. Restore brings it back and puts focus on its dismiss button. The window never changes height: the incident list takes or gives the room. Nothing is saved, so a reload brings all three back; in your app, store the dismissed ids (and don't store the critical one).

Only the incident list scrolls. It holds nothing focusable, so the region itself is a tab stop with a name and a focus ring, and the arrow keys scroll it. The top bar, the banners and the status line never move.

They are typed: each incident has an ISO start time, and AS_OF is a fixed "now", so "46 min" is the difference between them and reads the same on the server and in every time zone. In your app, replace AS_OF with the current time and refresh it on a timer you can pause.

To #: point it at your status page. It's a Shine Button with render set to an a element and nativeButton={false}. The banners are static notes, not live alerts: announce a new one with your own polite live region when it appears.