Modal
modalOpens imperative confirm, information, success, warning, or error dialogs through a shared API.
Usage
Confirmation dialog box
modal.confirm Command-style pop-up window with Cancel/Confirm double keys (requires a <ModalProvider /> on the page).
modal.confirm({
title: "Confirm to delete this record?",
content: "Cannot be restored after deletion.",
onOk: () => {
// Execute deletion
},
})Information prompt type
info / success / error / warning Derive different icons and main colors, and only render a single OK key.
<>
<Button onClick={() => modal.info({ title: "System prompts", content: "A new version has been released." })}>info</Button>
<Button onClick={() => modal.success({ title: "The operation was successful", content: "The data has been saved." })}>success</Button>
<Button onClick={() => modal.error({ title: "Operation failed", content: "Network abnormality, please try again later." })}>error</Button>
<Button onClick={() => modal.warning({ title: "Attention", content: "The current space is about to be exhausted." })}>warning</Button>
</>Asynchronous determination (loading)
onOk Confirm key to enter loading when returning to Promise; resolve will automatically close and reject will remain open.
modal.confirm({
title: "Submit order?",
content: "Click OK to initiate a request.",
onOk: () => new Promise((resolve) => setTimeout(resolve, 1200)),
})Custom button copy
okText / cancelText overrides the default "OK/Cancel".
modal.confirm({
title: "Log out?",
content: "You need to log in again after logging out.",
okText: "Exit",
cancelText: "Think again",
onOk: () => {},
})When to use
Use Modal to display a confirmation or status message from application logic with one function call, such as confirming deletion or reporting an operation result. Use declarative Dialog for complex custom content and forms, or AlertDialog for a destructive decision that cannot be dismissed lightly.
Import
import { modal, ModalProvider, hulianModalManager } from "@hulianui/ui"API / Options
Call modal.confirm(opts), modal.info, modal.success, modal.error, or modal.warning; each returns a ModalInstance, and the method implies the tone. Mount ModalProvider once at the application root, following the Toast pattern.
ModalOptions Props:
| Name | Type | Default | Description |
|---|---|---|---|
type | "confirm" | "info" | "success" | "error" | "warning" | — | Tone, normally implied by the imperative method. |
ModalOptions Events:
| Event | Type | Description |
|---|---|---|
onOk | () => void | Promise<unknown> | Confirm handler. A returned Promise puts the button in loading state, closes on resolve, and stays open on reject. |
onCancel | () => void | Called on Cancel, Escape, or overlay dismissal. |
ModalOptions Slots:
| Slot | Type | Description |
|---|---|---|
title | ReactNode | Bold primary title. |
content | ReactNode | Body content. |
okText | ReactNode | Confirm-button copy. Defaults to built-in Chinese "\u786e\u5b9a", meaning “Confirm.” |
cancelText | ReactNode | Cancel-button copy. Defaults to built-in Chinese "\u53d6\u6d88", meaning “Cancel”; rendered only for confirm dialogs. |
ModalInstance provides destroy() to close immediately and update(next) to change an open dialog.
Example
// Mount once in the root layout
<ModalProvider />
modal.confirm({
title: "Delete this record?",
content: "This action cannot be undone.",
onOk: () => {},
});
// The confirm button loads until the request resolves
modal.confirm({
title: "Submit order?",
content: "Confirming starts the request.",
onOk: () => fetch("/api/order", { method: "POST" }),
});Usage guidelines
- Mount exactly one
ModalProviderat the application root. Imperative calls have nowhere to render without it. - When
onOkreturns a Promise, only resolve closes automatically. Rejection keeps the dialog open for caller-owned error handling; do not also destroy it in the rejection path.
Related
Dialog · AlertDialog · Drawer · Popover · Tooltip · HoverCard
Playground
modal.confirm({
title: "Confirm deletion?",
content: "This operation is irreversible, please operate with caution.",
okText: "OK",
onOk: () => {},
})