Alert Banner Notification Block for React

Each banner has a level (error, warning, info or success) and queueOf sorts what is not dismissed by the ORDER list at the top of the file, so an error always comes first whatever order notices arrive in. Dismissing the one on screen moves the next one up into the same place; Previous and Next walk the queue round, so after the last comes the first. The pager says where you are in words ("Banner 2 of 4"), and the same words go to the status line.

By a glyph, a word and a weight: a circle with an exclamation mark, a triangle, an info mark and a check; the word (Error, Warning, Info, Success) in a badge; and an error title that is semibold with a bar at the banner's start. The only status colour is the error's icon. The banner is a plain note, not an alert, so it doesn't interrupt anyone; the status line says what changed after each press.

It hides the whole queue and puts a one-line note in the bar's place, "Banners are snoozed until 10:30 UTC", with a Show now button; the pager reads Snoozed and Previous and Next say why they wait. The time is the page's fixed "now" plus an hour, typed in the file; in your app, store the wake time and compare it with the clock when the page opens. Nothing here is stored: a reload brings every banner back.

The same bar, quiet: "No banners. Everything has been dismissed." and a Bring them back button, so the frame never changes height. Restore in the pager does the same job one dismissed banner at a time (it brings back all of them, and says how many).

The link in each banner is a Button around an a that points to # in this demo; point each at your own page. They're Buttons with render set to an a element and nativeButton={false}.

The banner's sentence takes the full width and its link and Dismiss drop to a row under it; the pager's two groups wrap onto two lines. The bar still holds the height of the tallest banner, so nothing moves when you step through them, and the drawn app below shrinks to what is left.