Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Incident Notice Billing Block for React Aria

A payment-provider incident read against one account: the three charges made inside the incident window with a status in words, the derived verdict (2 of 3 affected, 0 need action), timed updates, and a checkbox that unlocks Subscribe to updates.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Tell customers what an outage meant for their own money, with this incident notice section for React with React Aria. It shows the account of Trellisby, a project tracker, during "Degraded payment processing" between 09:10 and 10:25 UTC. A hairline frame with a plus mark on each corner holds the incident (one warning icon, its current stage as a Badge) and a verdict worked out from the account's data: "2 of 3 charges were affected, 0 need action". Under it are the three charges made inside the window, each with its time, amount, what to do and a status in words (Processed late; Failed and retried, now paid; Not affected), then three timed updates as an ordered list. A Checkbox, "Email me if a charge needs action", unlocks the one Shine Button, Subscribe to updates. It's built from Badge, Checkbox, Shine Button and Guides, with a CSS entrance only. For status pages, payment pages and any subscription app.

FAQ

Where does the verdict come from?

It is derived. Each charge in CHARGES has an outcome (clean, late or retried) and a fix flag for whether the customer must act. The affected count is the charges whose outcome is not clean and the action count is the ones with fix set, so the sentence under the incident title always agrees with the rows. In your app build the rows from the charges your server made inside the incident window.

How do I change the incident and its updates?

Edit WINDOW and UPDATES. Each update has a time, a stage and one sentence. The page does not link to a status page; add one to the incident title if you have it.

What does the checkbox do?

Subscribe to updates stays quiet, answers a press with a reason in the status line, until the box is ticked. Once it is subscribed the button reads Subscribed; unticking the box clears that. Nothing is sent: in your app save the choice with the customer's notification settings and email them when a charge in the window needs action.

What stays local?

The subscription, the status messages and the clock. The times are typed in UTC with machine-readable time values for the fixed incident day.

Is it accessible?

Each charge's status is written out, with a filled or hollow dot as a second cue. The checkbox is named by its sentence, the button is never disabled (it uses aria-disabled and says why), and a polite status message is present from load.

How does it look on a phone?

The incident, the charges and the updates stack in one column; the checkbox and the Subscribe button stay together in a bar at the bottom until the panel ends.