组件
Confirm Dialog 风险确认
在用户确认之前说清影响,在失败之后保留上下文。
适合删除、撤销访问或重置等需要明确确认的动作。对话框包含标题、影响说明、取消和明确动作名称;可在打开后预检,也可在确认时等待异步结果。
安装
pnpm dlx shadcn@4.22.1 add http://127.0.0.1:3040/r/v0.3.0/confirm-dialog.json首次使用请先完成 Registry 与主题接入。
状态与组合
onConfirm 正常完成后关闭,返回 false 时保留打开,抛出错误时显示失败反馈。confirmationText 适用于后果更重的动作,要求输入指定文本;普通保存不应增加这一步。
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title / confirmLabel | string | 必填 | 标题与确认动作 |
description | ReactNode | 必填 | 影响与后果 |
onConfirm | 同步或异步回调,可返回 false | 必填 | 执行动作并决定关闭 |
trigger | ReactElement | — | 可选触发器 |
open / onOpenChange | boolean / 回调 | 非受控关闭 | 可选择受控管理 |
destructive | boolean | true | 危险动作样式 |
confirmDisabled | boolean | false | 禁用确认 |
cancelLabel | string | Provider 文案 | 取消名称 |
confirmationText | string | — | 二次输入确认文本 |
onPrepare | 同步或异步回调 | — | 打开后预检 |
renderError | (error: unknown) => ReactNode | 通用失败文案 | 安全的应用错误展示 |
还支持 Base UI Popup 的 finalFocus 和 onOpenChangeComplete。正在执行时阻止重复确认;调用方应正确返回异步 Promise。
键盘与约束
焦点被限制在模态内,关闭后回到触发点或指定 finalFocus。操作执行期间不要让用户误以为取消已经中止后端动作。
避免这样使用
不要使用含糊的“确定”替代“删除工作区”;不要直接展示未知错误对象;不要把每个低风险动作都包一层确认。
来源与版本
0.1.0,来自 Subtic apps/web/components/ui/dialog.tsx。API 错误映射改为 renderError,内部文案可配置。
查看由当前源码生成的类型参考
只展示 Kitseed 自身定义的属性,原生 HTML 与 Base UI 透传属性请参阅对应上游说明。
ConfirmDialogView
| 属性 | 类型 | 默认值 |
|---|---|---|
trigger? | ReactElement<Record<string, unknown>> | undefined | — |
open | boolean | — |
onOpenChange | (open: boolean) => void | — |
onOpenChangeComplete? | ((open: boolean) => void) | undefined | — |
finalFocus? | ComponentProps<typeof AlertDialog.Popup>["finalFocus"] | — |
title | string | — |
description | ReactNode | — |
busy? | boolean | — |
children | ReactNode | — |
ConfirmDialog
| 属性 | 类型 | 默认值 |
|---|---|---|
trigger? | ReactElement<Record<string, unknown>> | — |
open? | boolean | — |
onOpenChange? | (open: boolean) => void | — |
onOpenChangeComplete? | (open: boolean) => void | — |
finalFocus? | ComponentProps<typeof AlertDialog.Popup>["finalFocus"] | — |
title | string | — |
description | ReactNode | — |
confirmLabel | string | — |
confirmationText? | string | — |
confirmDisabled? | boolean | false |
cancelLabel? | string | — |
destructive? | boolean | true |
onPrepare? | () => void | Promise<void> | — |
onConfirm | () => void | boolean | Promise<void | boolean> | — |
renderError? | (error: unknown) => ReactNode | — |