Preview Updated 2026-05-10

Confirm dialog

Modal-derived component for confirmation prompts, with default and danger tones.

Basic usage

Built-in icon, title, description, and cancel/confirm buttons. tone="danger" switches to a red palette to emphasize irreversible actions. closeOnOverlay defaults to false — destructive actions must require an explicit button click.

背景

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfConfirmDialog, CfButton } from '@chufix-design/vue';
const open = ref(false);
const dangerOpen = ref(false);
</script>
<template>
  <div class="demo-row">
    <CfButton @click="open = true">提示确认</CfButton>
    <CfButton variant="danger" @click="dangerOpen = true">危险确认</CfButton>
    <CfConfirmDialog
      v-model:open="open"
      title="确认操作"
      description="这个操作可以稍后撤销。"
      @confirm="open = false"
    />
    <CfConfirmDialog
      v-model:open="dangerOpen"
      tone="danger"
      title="永久删除？"
      description="此操作不可逆，相关数据会立即销毁。"
      confirm-text="永久删除"
      @confirm="dangerOpen = false"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfConfirmDialog, CfButton } from '@chufix-design/vue';
const open = ref(false);
const dangerOpen = ref(false);
</script>
<template>
  <div class="demo-row">
    <CfButton @click="open = true">提示确认</CfButton>
    <CfButton variant="danger" @click="dangerOpen = true">危险确认</CfButton>
    <CfConfirmDialog
      v-model:open="open"
      title="确认操作"
      description="这个操作可以稍后撤销。"
      @confirm="open = false"
    />
    <CfConfirmDialog
      v-model:open="dangerOpen"
      tone="danger"
      title="永久删除？"
      description="此操作不可逆，相关数据会立即销毁。"
      confirm-text="永久删除"
      @confirm="dangerOpen = false"
    />
  </div>
</template>

import { useState } from 'react';
import { CfConfirmDialog } from '@chufix-design/react';

export default function Demo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <CfConfirmDialog
      open={open}
      onOpenChange={setOpen}
      tone="danger"
      title="Delete permanently?"
      description="This action cannot be undone."
      confirmText="Delete permanently"
      onConfirm={onConfirm}
      />
    </>
  );
}

import { useState } from 'react';
import { CfConfirmDialog } from '@chufix-design/react';

export default function Demo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <CfConfirmDialog
      open={open}
      onOpenChange={setOpen}
      tone="danger"
      title="Delete permanently?"
      description="This action cannot be undone."
      confirmText="Delete permanently"
      onConfirm={onConfirm}
      />
    </>
  );
}

Async confirm with loading

Hook confirm to a 1.5s async operation. The confirm button shows a spinner during the wait and the cancel button is disabled.

背景

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfConfirmDialog, CfButton } from '@chufix-design/vue';
const open = ref(false);
const loading = ref(false);
async function onConfirm() {
  loading.value = true;
  await new Promise((r) => setTimeout(r, 1500));
  loading.value = false;
  open.value = false;
}
</script>
<template>
  <div class="demo-row">
    <CfButton variant="danger" @click="open = true">删除并等待 1.5s</CfButton>
    <CfConfirmDialog
      v-model:open="open"
      tone="danger"
      title="删除项目？"
      description="模拟一个 1.5s 的异步删除操作，期间确认按钮显示 spinner、取消按钮被禁用。"
      :loading="loading"
      confirm-text="永久删除"
      @confirm="onConfirm"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfConfirmDialog, CfButton } from '@chufix-design/vue';
const open = ref(false);
const loading = ref(false);
async function onConfirm() {
  loading.value = true;
  await new Promise((r) => setTimeout(r, 1500));
  loading.value = false;
  open.value = false;
}
</script>
<template>
  <div class="demo-row">
    <CfButton variant="danger" @click="open = true">删除并等待 1.5s</CfButton>
    <CfConfirmDialog
      v-model:open="open"
      tone="danger"
      title="删除项目？"
      description="模拟一个 1.5s 的异步删除操作，期间确认按钮显示 spinner、取消按钮被禁用。"
      :loading="loading"
      confirm-text="永久删除"
      @confirm="onConfirm"
    />
  </div>
</template>

import { useState } from 'react';
import { CfButton, CfConfirmDialog } from '@chufix-design/react';

export default function Demo() {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  async function onConfirm() {
    loading.value = true;
    await new Promise((r) => setTimeout(r, 1500));
    loading.value = false;
    open.value = false;
  }
  return (
    <>
      <div className="demo-row">
          <CfButton variant="danger" onClick={() => setOpen(true)}>删除并等待 1.5s</CfButton>
          <CfConfirmDialog open={open} onOpenChange={setOpen} tone="danger" title="删除项目？" description="模拟一个 1.5s 的异步删除操作，期间确认按钮显示 spinner、取消按钮被禁用。" loading={loading} confirm-text="永久删除" onConfirm={onConfirm} />
        </div>
    </>
  );
}

import { useState } from 'react';
import { CfButton, CfConfirmDialog } from '@chufix-design/react';

export default function Demo() {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  async function onConfirm() {
    loading.value = true;
    await new Promise((r) => setTimeout(r, 1500));
    loading.value = false;
    open.value = false;
  }
  return (
    <>
      <div className="demo-row">
          <CfButton variant="danger" onClick={() => setOpen(true)}>删除并等待 1.5s</CfButton>
          <CfConfirmDialog open={open} onOpenChange={setOpen} tone="danger" title="删除项目？" description="模拟一个 1.5s 的异步删除操作，期间确认按钮显示 spinner、取消按钮被禁用。" loading={loading} confirm-text="永久删除" onConfirm={onConfirm} />
        </div>
    </>
  );
}

API

Prop	Type	Default	Description
`open` / `v-model:open`	`boolean`	`false`	Visibility control
`title`	`string`	—	Main title
`description`	`string`	—	Description
`tone`	`'default' \| 'danger'`	`'default'`	Danger uses red
`confirmText` / `cancelText`	`string`	`'Confirm'` / `'Cancel'`
`loading`	`boolean`	`false`	Spinner on the confirm button
`closeOnOverlay` / `closeOnEsc`	`boolean`	`false` / `true`

Events: confirm, cancel, update:open.