kitseed.
组件

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 / confirmLabelstring必填标题与确认动作
descriptionReactNode必填影响与后果
onConfirm同步或异步回调,可返回 false必填执行动作并决定关闭
triggerReactElement—可选触发器
open / onOpenChangeboolean / 回调非受控关闭可选择受控管理
destructivebooleantrue危险动作样式
confirmDisabledbooleanfalse禁用确认
cancelLabelstringProvider 文案取消名称
confirmationTextstring—二次输入确认文本
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—
openboolean—
onOpenChange(open: boolean) => void—
onOpenChangeComplete?((open: boolean) => void) | undefined—
finalFocus?ComponentProps<typeof AlertDialog.Popup>["finalFocus"]—
titlestring—
descriptionReactNode—
busy?boolean—
childrenReactNode—

ConfirmDialog

属性类型默认值
trigger?ReactElement<Record<string, unknown>>—
open?boolean—
onOpenChange?(open: boolean) => void—
onOpenChangeComplete?(open: boolean) => void—
finalFocus?ComponentProps<typeof AlertDialog.Popup>["finalFocus"]—
titlestring—
descriptionReactNode—
confirmLabelstring—
confirmationText?string—
confirmDisabled?booleanfalse
cancelLabel?string—
destructive?booleantrue
onPrepare?() => void | Promise<void>—
onConfirm() => void | boolean | Promise<void | boolean>—
renderError?(error: unknown) => ReactNode—

本页内容