Popconfirm

A lightweight confirmation dialog anchored to a trigger element. Use it when an action needs a quick confirmation before executing, such as deleting a record, submitting a form, or any irreversible operation.

Playground

Title

placement

okType

arrow

disabled

<Popconfirm
  title="Are you sure you want to delete this?"
  onConfirm={() => console.log('confirmed')}
  onCancel={() => console.log('cancelled')}
>
  <Button variant="danger">Delete item</Button>
</Popconfirm>

Basic usage

Wrap any element with Popconfirm. Clicking the trigger opens the confirmation dialog.

With description

Add a description below the title for more context.

OK button variants

Use okType to change the variant of the OK button. Defaults to 'danger'.

Async confirm

Return a Promise from onConfirm to show a loading spinner on the OK button until the operation completes.

Custom button text

Override okText and cancelText to match your language or action context.

Placements

12 placement options, same as Tooltip and Popover.

No arrow

Set arrow={false} to hide the directional pointer.

Disabled

When disabled, clicking the trigger does nothing.

Controlled

Use open + onOpenChange for full control over visibility.

API

Property	Type	Default	Description
`title`*	`ReactNode`	—	Confirmation question shown as the main text.
`description`	`ReactNode`		Optional description shown below the title.
`icon`	`ReactNode`	Warning circle	Icon displayed next to the title. Pass null to hide.
`placement`	`"top" \| "topLeft" \| "topRight" \| "bottom" \| "bottomLeft" \| "bottomRight" \| "left" \| "leftTop" \| "leftBottom" \| "right" \| "rightTop" \| "rightBottom"`	"top"	Placement relative to the trigger element.
`open`	`boolean`		Controlled open state.
`defaultOpen`	`boolean`	false	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`		Called when visibility changes.
`onConfirm`	`(e: MouseEvent) => void \| Promise<void>`		Called when OK is clicked. Return a Promise to show loading on the button until it resolves.
`onCancel`	`(e: MouseEvent) => void`		Called when Cancel is clicked.
`okText`	`ReactNode`	"OK"	Label for the OK button.
`cancelText`	`ReactNode`	"Cancel"	Label for the Cancel button.
`okType`	`"primary" \| "secondary" \| "danger" \| "warning" \| "ghost"`	"danger"	Variant applied to the OK button.
`arrow`	`boolean`	true	Show the directional arrow.
`disabled`	`boolean`	false	Prevent the popconfirm from opening.
`overlayClassName`	`string`		Extra class applied to the floating overlay.