No Alerts Empty State Block for React

Nothing is monitored or sent. The four systems, their quiet strips and the test alerts are typed in the file; pressing Send a test alert only shows a row in the page, and Dismiss removes it. To wire it for real, replace SYSTEMS and the strips with your health checks, render the quiet view only when nothing is firing, and send the test press to your on-call tool where the code says so.

All clear is said with a word, a check glyph and weight, so it reads the same in every theme and to people who cannot tell green from red. The one status color on the page is a small dot on the test alert row, which is an alert and says so in words; the quiet rows use foreground tones only.

Each strip is 30 cells, one for each of the last 30 days, ending today. Quiet days are short cells; a test alert marks today's cell on its system with a tall solid one. They are drawn, hidden from assistive technology, and a sentence under the list says the same in words ("Each strip is the last 30 days, one cell a day, with no alerts."), with the check date, Fri 9 Oct, as a real time element. On a phone the strips are dropped and each row keeps its name and its word.

It cycles through four typed tests, starting with Database latency, shows the row in the dashed slot with today's date, marks the strip and moves focus to Dismiss. While a test alert is showing the button stays in the tab order and says "A test alert is already showing. Dismiss it first." instead of adding another. Dismiss returns focus to the button and the page goes back to "All quiet".

No. The slot for active alerts has one fixed height in both states, the heading and the two sentences are held at the taller of their two versions, and the strip cells change height inside a strip that has a fixed one, so the button and the rows stay where they are.

The drawing sits above the copy at 140 px tall, the button is full width and on the first screen, and the four rows keep just a name and a word. Nothing scrolls sideways, even at 320 px wide, and the sentences about the strips are kept for screen readers.