Confirm Modal

A focused confirmation dialog for destructive or irreversible actions. It shows a variant-coloured icon, a title, message, and Cancel / Confirm buttons, and supports an isLoading state that disables the buttons and shows a spinner while the action runs. Like Modal, it's controlled via isOpen + onClose, plus an onConfirm callback. Convenience presets DeleteConfirmModal and RegenerateConfirmModal are also exported.

Import

1import { ConfirmModal } from "@yuhuanowo/yunui";

Basic

Keep isOpen in state, run your action in onConfirm, and close via onClose. The variant (danger / warning / info / success) sets the icon and confirm-button colour.

1"use client";
2 
3import { useState } from "react";
4import { ConfirmModal, Button } from "@yuhuanowo/yunui";
5 
6export function ConfirmModalDemo() {
7  const [open, setOpen] = useState(false);
8  return (
9    <>
10      <Button variant="red" onClick={() => setOpen(true)}>Delete project</Button>
11      <ConfirmModal
12        isOpen={open}
13        onClose={() => setOpen(false)}
14        onConfirm={() => setOpen(false)}
15        variant="danger"
16        title="Delete project?"
17        message="This permanently removes the project and all of its data. This action cannot be undone."
18        confirmText="Delete"
19      />
20    </>
21  );
22}

ConfirmCloseDialog

A narrower sibling for the one case that keeps recurring: the reader is about to close something with unsaved edits.

1import { ConfirmCloseDialog } from "@yuhuanowo/yunui";
2 
3<ConfirmCloseDialog
4  isOpen={showConfirm}
5  onDiscard={close}
6  onKeepEditing={() => setShowConfirm(false)}
7/>

It takes no copy at all — its strings come from useYunUI().useT under components.confirmCloseDialog, because "discard" versus "keep editing" is wording an app usually wants to own. It traps focus, locks body scroll, closes on Escape, and puts initial focus on Keep editing rather than Discard, so a stray Return does not throw the work away.

Props