Popconfirm
Popconfirm asks for confirmation right next to the control that triggers an action, instead of a modal. It is a click-triggered Popover with a question and Cancel / Confirm buttons.
Demos
Basic
Focus moves to Cancel when it opens (the safe choice), Escape or a click outside cancels, and focus returns to the trigger when it closes.
Async and cancelled confirmation
Return a promise from onPositiveClick and Confirm shows a spinner until it settles. Return false (or a promise of false) to keep the popconfirm open.
Buttons, icon and actions
positiveText={null} or negativeText={null} hides a button, showIcon={false} hides the icon, and action replaces both buttons.
Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
content | ReactNode | undefined | The question. | Unreleased |
positiveText | ReactNode | null | locale “Confirm” | Confirm button text; null hides it. | Unreleased |
negativeText | ReactNode | null | locale “Cancel” | Cancel button text; null hides it. | Unreleased |
positiveButtonProps | Partial<ButtonProps> | undefined | Extra props for Confirm, such as type: "error" for a destructive action. | Unreleased |
negativeButtonProps | Partial<ButtonProps> | undefined | Extra props for Cancel. | Unreleased |
showIcon | boolean | true | Show the warning icon. | Unreleased |
icon | ReactNode | undefined | Replaces the warning icon. | Unreleased |
action | ReactNode | undefined | Replaces both buttons. | Unreleased |
onPositiveClick | (event: MouseEvent) => boolean | void | Promise<boolean | void> | undefined | Called by Confirm. false keeps it open; a promise shows a spinner. | Unreleased |
onNegativeClick | (event: MouseEvent) => boolean | void | Promise<boolean | void> | undefined | Called by Cancel. false keeps it open. | Unreleased |
It also takes every Popover prop except header and footer; trigger defaults to click. The surface is an alertdialog.