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 semantic 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. It does not reach the confirm button; it only changes the leading icon and the icon color. |
danger | boolean | false | Destructive action: the confirm button switches to tone="danger" and the leading icon turns text-danger. Same name and meaning as danger on Popconfirm. |
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" }),
});
// Deletion: the confirm button turns red, clearly unlike Save or Continue
modal.confirm({
title: "Delete this record?",
content: "This cannot be undone.",
danger: true,
onOk: () => remove(id),
});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. - Destructive confirmations need `danger`; `type="error"` is not a substitute.
typeonly drives the leading icon and its color, somodal.error({ title: "Delete?" })produces a red icon next to a brand-colored confirm button that looks exactly like Save or Continue. A button that matches Save under the words "this cannot be undone" is a button people misclick. dangerchanges the icon color but not the icon glyph:modal.confirm({ danger: true })keeps the question mark, because the glyph says "this is a question" while the color says "the result is irreversible." Passtype: "error"as well when you also want the cross glyph.
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: () => {},
})