Confirm Delete Dialog Block for React

So you can see it without a click. On load the alert is a copy drawn in place over the project list: a native dialog element with the alertdialog role that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Delete button in the header opens the real Alert Dialog, modal, with its focus trap, Escape and focus on Cancel, and the copy stays closed until a reload. Both show the same ConfirmFields component and share the block's state, so a name typed in the copy is there in the real one. In your app keep the Alert Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

PROJECT holds the exact name, and Delete is enabled only when what was typed equals it, capitals included. The line under the field is a polite live region in one reserved slot, so "Matches." and "Does not match." are read out without moving the buttons, and the field is named by a label that says what to type. Pressing Enter in the field confirms only when it matches. Typing the name is the friction on purpose: use it for what can't be undone, and a plain two-button alert for what can.

Here it folds the project's row out of the drawn list, turns the header's button into Restore, and says in a polite status message that nothing was deleted in this demo. Restore brings the row back. In your app delete on your server in confirm, keep the alert open with its busy state until the server answers, fold the row only on success, and show a failure in the field's line with a retry. Offer Restore only if your server really keeps the project for a while.

The real alert is named by its title and described by its sentence, and it opens with focus on Cancel, never on Delete, so a stray Enter backs out. Escape and Cancel close it and return focus to the Delete button; clicking outside does not close it, since an alert has to be answered. Cancel is the focus target through initialFocus. After a confirmed delete the button that opened the alert is gone, so about 300 ms later focus moves to Restore, the button that took its place. The copy shown on load moves no focus; Escape inside it, Cancel and Delete close it the same way.

An alert's confirm that deletes uses the catalog Button in its destructive variant, and the block has no Shine Button: the Shine Button is the one primary for actions that move something forward, and this one ends something. The destructive colour is on that button only. The rest, including the list, the field and the lines, stays in the theme's neutral tones.

The copy shown on load docks to the foot of the page as a bottom sheet, its actions pinned at the bottom with Cancel under Delete project, and the list and the field scroll above them. The real alert keeps the Alert Dialog's own layout: a centred card that is as wide as the screen allows.