Billing Billing Incident Notice
A high-visibility incident notice for billing pages, used to tell users about payment processor downtime or scheduled maintenance before they hit an error at checkout. Shows a severity badge (investigating, identified, monitoring, resolved), a message, an optional list of affected services, a link to a status page, and a last-updated timestamp. Built on the shadcn/ui Alert component with a native alert role for screen readers.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its alert, badge, button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-billing-incident-notice.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing28.tsx instead.
Usage
The file also exports billing28Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Billing28, billing28Demo } from "@/components/blocks/billing/billing28"; export default function Page() { return <Billing28 {...billing28Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| severity | "investigating" | "identified" | "monitoring" | "resolved" | "investigating" | Drives the icon, badge label, and badge color. "resolved" also switches the alert to its non-destructive style. |
| title | string | "Billing system incident" | Alert title. |
| message | string | none | Main incident description. |
| affectedServices | string[] | none | Optional list of affected services or features, rendered as small badges. |
| updatedAt | string | none | Optional relative or absolute timestamp shown next to the status page link. |
| statusHref | string | none | Optional link to a full status page. The link is omitted if this isn't passed. |
| statusLabel | string | "View status page" | Label for the status page link. |
| className | string | none | Extra classes for the outer alert. |
Behavior notes
- The alert element carries the browser's native role=alert (inherited from the shadcn/ui Alert component), so screen readers announce the incident as soon as it mounts without any extra ARIA wiring.
- Severity is purely presentational, the component doesn't poll or refetch anything itself. Re-render it with a new severity prop (for example from a status-page webhook or periodic fetch in a parent component) to reflect updates.
- Only "resolved" switches the alert's outer style from destructive to the default (neutral) variant, the other three severities all use the destructive alert styling with a different badge color and icon layered on top.
- affectedServices and the status-page link are both optional and independently omitted when not passed, so the block also works as a bare severity + message notice.
Frequently asked questions
More Billing Blocks
View all →Billing Invoice List
Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.
Billing Failed Payment Alert
High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.
Billing Credit Balance
Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.
Billing Payment Methods
A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.
Billing Add Card
A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.
Billing Coupon Code
An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.