Overlays
Confirm Modal
Variant-colored confirmation dialog with a loading state for destructive actions.
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
import { 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.
Confirm an action
"use client";
import { useState } from "react";
import { ConfirmModal, Button } from "@yuhuanowo/yunui";
export function ConfirmModalDemo() {
const [open, setOpen] = useState(false);
return (
<>
<Button variant="red" onClick={() => setOpen(true)}>Delete project</Button>
<ConfirmModal
isOpen={open}
onClose={() => setOpen(false)}
onConfirm={() => setOpen(false)}
variant="danger"
title="Delete project?"
message="This permanently removes the project and all of its data. This action cannot be undone."
confirmText="Delete"
/>
</>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cancelText | string | — | Text for cancel button |
| className | string | — | Additional CSS classes |
| confirmText | string | — | Text for confirm button |
| icon | ReactNode | — | Custom icon (overrides variant default) |
| isLoading | boolean | false | Whether action is in progress |
| isOpen* | boolean | — | Whether the modal is open |
| message* | ReactNode | — | Main message content |
| onClose* | () => void | — | Callback when modal should close |
| onConfirm* | () => void | — | Called when user confirms |
| size | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full" | — | Modal size |
| subtitle | string | — | Optional subtitle displayed below title |
| title* | string | — | Modal title (required for accessibility) |
| variant | "danger" | "warning" | "info" | "success" | warning | Variant affects icon and button colors |