Alert Banner Stack
Three calm ops banners, maintenance, expiring card, and the resolved incident.
Three calm ops banners, maintenance, expiring card, and the resolved incident.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Alert Banner Stack is three in-app banners stacked on the ui/alert primitive, each dismissible with an X. The info banner announces scheduled maintenance Saturday Jun 14, Acme will be read only from 02:00 to 02:20 UTC while the primary database moves to new hardware. The warning banner flags the Visa ending 4242 expiring at the end of June, update it before the Jul 1 renewal to avoid a failed charge, with an inline Update payment method link. The resolved banner confirms elevated API errors that began at 13:41 are fully resolved, no data was lost, with a Read the postmortem link. Every line is dated and the voice stays calm and ops, nothing requires panic or immediate action except the Visa.
Banners are one array with an icon, title, body, and optional cta. Dismissals are per person and a dismissed banner never returns for the same event.
Reach for this block at the top of any page that surfaces ops communications, wired to a workspace-level alerts endpoint that returns only banners the current user has not dismissed. Gate the warning variant on billing status from your Stripe webhook data.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace ops banner strip. Other stacks:
Tip: the resolved variant with its postmortem link closes the loop, users who saw the incident notice deserve to see it go green.