ConfirmDialog
v1.0.0Lightweight single-step confirmation dialog for destructive or consequential actions. Fills the H5 (Error Prevention) gap between zero-confirmation and the heavy CeremonyGate pattern. Includes useConfirmDialog hook for imperative usage.
import { ConfirmDialog } from "@danagraph/design-system"Props
| Prop | Type | Default | Description |
|---|---|---|---|
openreq | boolean | — | Whether the dialog is open. |
titlereq | string | — | Dialog heading. |
description | ReactNode | — | Explanatory body in plain language. |
confirmLabel | string | "Confirm" | Confirm button label. |
cancelLabel | string | "Cancel" | Cancel button label. |
variant | "destructive" | "agency" | "neutral" | "neutral" | Visual and semantic variant. |
onConfirmreq | () => void | — | Called when user confirms. |
onCancelreq | () => void | — | Called when user cancels or presses Escape. |
loading | boolean | false | Loading state on the confirm button. |
openrequiredType
booleanDefault —Whether the dialog is open.
titlerequiredType
stringDefault —Dialog heading.
descriptionType
ReactNodeDefault —Explanatory body in plain language.
confirmLabelType
stringDefault "Confirm"Confirm button label.
cancelLabelType
stringDefault "Cancel"Cancel button label.
variantType
"destructive" | "agency" | "neutral"Default "neutral"Visual and semantic variant.
onConfirmrequiredType
() => voidDefault —Called when user confirms.
onCancelrequiredType
() => voidDefault —Called when user cancels or presses Escape.
loadingType
booleanDefault falseLoading state on the confirm button.
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?