Blast Radius
betaWhat an action will change before it runs — how many things, how, which can't be undone, and a sample by name.
- AI
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add blast-radiusNo npm packages are needed beyond what Dowel already requires.
import { BlastRadius } from "@/components/ui/blast-radius";Default
In An Approval
All Permanent
Loading
Failed
Nothing Changes
<BlastRadius>
| Prop | Type | Default |
|---|---|---|
data | BlastRadiusData | — |
errorWhy the dry run could not say. The decision can still be made without it. | string | — |
heading | string | "What this will change" |
limitHow many changes to list by name before "and N more". | number | 5 |
loadingWhile the dry run is still working. | boolean | false |
nounWhat the things are called: | BlastRadiusNoun | { one: "record", other: "records" } |
reversibilityHow reversible a change is when it does not say. Usually the action's own. | BlastRadiusReversibility | "revertible" |
Plus every attribute of <section> except children.
A named section whose first line is a sentence that says it all — "43 records will change: 40 updated, 3 deleted. 3 cannot be undone." — so nothing depends on the colour of a border. That line is a polite live region present from the start, because a dry run usually finishes after the question is already on screen, and the section is aria-busy until it does. Permanent changes are listed first and say so in words. When the list is a sample the counts say "at least" rather than passing a sample off as a total, and the rest is counted in "and N more". A failed dry run says why, and leaves the decision to the person.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes