ConfirmDialog 確認對話框

Dialog 的「破壞性動作分三級」規範，做成固定寫法的元件。

在 Storybook 開啟 ↗

用途

中、高後果動作的確認：標題講動作、描述講後果、確認鈕的字是動詞。 搭配 useDialogState 管一個畫面裡多種對話框的開關（天然單開、同值再設即關）。

何時不要用

✅ 這樣做

後果不可逆或影響範圍大的動作：作廢、送出鎖定、批次刪除。

🚫 不要這樣

可復原的低後果動作不要跳確認——直接執行＋就地提供「復原」。 每個刪除都跳確認，三天後使用者就會閉著眼睛按確定，確認框變成儀式就不再保護任何東西。 分級判準見 Dialog。

狀態

三個行為契約，每一條都有 play function 驗收：

1. 確認後不自動關閉——成功才關、失敗留在原地顯示錯誤，時機由宿主在 onConfirm 的後續決定。元件刻意不吃 Promise：async 編排與錯誤呈現是應用層的事。
2. loading 鎖住所有出口——確認、取消、Esc、點遮罩、右上關閉一律無效。 操作進行中關掉對話框，使用者會以為取消了，實際上沒有。
3. typeToConfirm 硬確認——輸入指定字串才解鎖確認鈕。 硬鎖定那條「把危險操作變成刻意的決定」在對話框層的落地， 保留給影響半徑最大、完全無法還原的操作。

破壞性＋硬確認（輸入編號才解鎖）

無障礙

• 繼承 Dialog 的全部保證：焦點鎖定、aria-modal、標題與描述的 aria 連動。
• loading 時確認鈕帶 aria-busy，螢幕報讀器聽得到「處理中」。
• 硬確認的輸入框走 Label 連動，錯字時按鈕維持 disabled——不用紅字罵人， 解鎖與否本身就是回饋。

取用

npx shadcn@latest add https://kielchang.github.io/dooping-design-book/r/confirm-dialog.json
npx shadcn@latest add https://kielchang.github.io/dooping-design-book/r/use-dialog-state.json