Feedback

Popconfirm

A lightweight confirmation popover that appears before a destructive action — a simpler alternative to a full AlertDialog when the context is already clear. Supports async confirm handlers with loading state.

Installation

npx benflux-ui add popconfirm

Controlled open state

const [open, setOpen] = useState(false)

<Popconfirm
  title="Are you sure?"
  open={open}
  onOpenChange={setOpen}
  onConfirm={handleConfirm}
>
  <Button onClick={() => setOpen(true)}>Delete</Button>
</Popconfirm>

Custom icon

import { Trash2 } from "lucide-react"

<Popconfirm
  title="Move to trash?"
  icon={<Trash2 className="h-4 w-4 text-destructive" />}
  okType="danger"
  onConfirm={handleDelete}
>
  <Button>Delete</Button>
</Popconfirm>

Props

Prop	Type	Default	Description
title*	ReactNode	—	Confirmation question shown as the popover heading
description	ReactNode	—	Additional context shown below the title
onConfirm	(e?) => void \| Promise<void>	—	Called when the user clicks OK. Async functions show a loading spinner.
onCancel	(e?) => void	—	Called when the user clicks Cancel
okText	ReactNode	"OK"	Confirm button label
cancelText	ReactNode	"Cancel"	Cancel button label
okType	"default" \| "primary" \| "danger" \| "ghost"	"primary"	Visual style of the OK button
showCancel	boolean	true	Show or hide the cancel button
icon	ReactNode	<AlertCircle />	Icon displayed next to the title
placement	"top" \| "bottom" \| "left" \| "right" \| "topLeft" \| "topRight" \| "bottomLeft" \| "bottomRight"	"top"	Preferred placement of the popover
disabled	boolean	false	Prevents the popover from opening
open	boolean	—	Controlled open state
defaultOpen	boolean	false	Initial open state (uncontrolled)
onOpenChange	(open: boolean) => void	—	Called when the open state changes