@ug666/react 文档演示

Dialog 确认对话框

Dialog 采用 AlertDialog 模式，固定为取消 + 确认双按钮结构，专用于需要用户明确确认的操作。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Dialog } from '@ug666/react'

基础确认

default 变体，适合提交、保存等普通确认场景。

危险确认

destructive 变体，确认按钮显示为红色，适合删除等不可逆操作。

自定义文案

通过 cancelText 和 confirmText 自定义按钮文案。

代码示例

Dialog 仅需传入 open、title 与回调即可快速集成。

import { useState } from 'react'
import { Button, Dialog } from '@ug666/react'

export function DeleteConfirmDialog() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>删除账号</Button>
      <Dialog
        open={open}
        onOpenChange={setOpen}
        title="确认删除账号"
        description="此操作不可撤销，所有数据将被永久删除。"
        variant="destructive"
        confirmText="永久删除"
        onConfirm={() => console.log('已确认删除')}
      />
    </>
  )
}

Props 说明

属性	类型	默认值	说明
open	boolean	false	控制对话框显示状态。
onOpenChange	(open: boolean) => void	—	状态变更回调。
title	string	—	对话框标题（必填）。
description	string	—	对话框描述文字。
variant	'default' \| 'destructive'	'default'	确认按钮样式变体。
cancelText	string	'取消'	取消按钮文案。
confirmText	string	'确认'	确认按钮文案。
onConfirm	() => void	—	点击确认按钮的回调。
onCancel	() => void	—	点击取消按钮的回调。