React 组件

UGDialog 确认对话框

UGDialog 固定为取消 + 确认双按钮结构，打开后优先聚焦安全的取消操作，专用于需要用户明确确认的操作。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGDialog } from '@ug666/ui-react'

基础确认

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

危险确认

destructive 变体，确认按钮显示为红色，且仍优先聚焦取消按钮，适合删除等不可逆操作。

长文案与自定义操作

长说明和较长按钮文案仍由组件控制滚动、换行与窄屏边界。

代码示例

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

tsx

import { useState } from 'react'
import { UGButton, UGDialog } from '@ug666/ui-react'

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

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

属性

属性	类型	默认值	说明
open	boolean	false	控制对话框显示状态。
onOpenChange	(open: boolean) => void	—	状态变更回调。
title	string	—	对话框标题（必填）。
description	string	—	对话框描述文字。
variant	'default' \| 'destructive'	'default'	确认按钮样式变体。
cancelText	string	'取消'	取消按钮文案。
confirmText	string	'确认'	确认按钮文案。
onConfirm	() => void	—	点击确认按钮的回调。
onCancel	() => void	—	点击取消按钮的回调。
className	string	—	Portal 根容器额外类名；宽度、边界和内部间距由组件合同维护。