Popconfirm

A confirmation attached to the control that triggers it, for a question small enough that a Modal would be too much.

Basic

Wrap a button in Popconfirm and give it a title to ask before the action runs, with onConfirm and onCancel for each answer.

With a description

Add a description under the title to say what happens next, like what else a delete removes.

Placement

Set placement to open the bubble on any of twelve sides and corners of its trigger, and it flips when it would leave the screen.

Custom icon

Pass icon a node to replace the warning glyph, like a red error icon for a delete.

Without an icon

Set icon={null} to leave the glyph out, for a question that needs no warning.

Button props

Pass okButtonProps and cancelButtonProps to style either button, like a red Delete or a quieter text Cancel.

No cancel button

Set showCancel={false} to show a single button, for a notice the reader only has to acknowledge.

Button labels

Set okText and cancelText to name the buttons after the action, as plain text or a node with an icon.

Controlled loading

Hold open yourself and set okButtonProps.loading while the request runs, then close the bubble when it finishes.

Async confirm

Return a Promise from onConfirm and the OK button shows a spinner until it settles, then the bubble closes.

Failed confirm

Reject the Promise from onConfirm to keep the bubble open after a failed request, so the reader can try again.

Acknowledgement

Pair showCancel={false} with a success icon to turn the bubble into a short confirmation that something worked.

Conditional confirm

Set disabled to skip the bubble, and the trigger's own onClick runs straight away, like when the reader turns confirmation off.

Inside a Modal

A Popconfirm on each row of a Modal opens above the dialog, with no z-index to set.

Discard unsaved changes

Tie disabled to whether a field has unsaved edits, so Cancel asks first only when there is something to lose.

Styling the parts

Pass classNames to style one part of the bubble, like container for a wider box or icon for a larger glyph.

In context

The component inside real screens, with the components it usually sits beside.

API key list

A list of API keys where each Revoke asks first, and the row leaves once the onConfirm Promise resolves.

API Reference

Popconfirm
Popconfirm's props. Rows marked antuikit in the Version column are added by the kit.